Додаткові посилання для опрацювання теми:
1. https://docs.google.com/presentation/d/1QUxfrppgvdj-gDW-suMI3_HYlKMIjlKa5Xj7dNNcu1s/htmlpresent?hl=uk
2. https://studopedia.su/10_1267_vikoristannya-multimedia-na-veb-storinkah.html
3. https://comscienceatschool.blogspot.com/p/blog-page_19.html
Хоча веб-браузери мають вбудовану підтримку зображень з найперших днів, вбудовування аудіо або відео на веб-сторінку завжди вимагало додаткових модулів (окремих програмних компонентів), які додають більше можливостей браузеру, але не є його частиною (наприклад, Flash, QuickTime, RealPlayer та інші).
Плагін також означає, що додаток, який відтворює аудіо і відео вміст, не є частиною браузера. Модуль, який підключається, заблоковано в віртуальному середовищі зі своєю програмою, ізольованою від браузера і від будь-якого вмісту сторінки. Крім того, такі приєднувані модулі є обов'язковими. Тому немає впевненості тому, що відвідувачі сайту мають необхідне програмне забезпечення для перегляду вмісту.
Стандарт HTML5 вводить нові елементи <audio> і <video>, які дозволяють веб-розробникам вбудовувати звук і відео на веб-сторінку, не вимагаючи власних плагінів. Звичайно з цього випливає, що сам браузер повинен мати можливість відтворення таких файлів, на даний момент тільки останні версії браузерів підтримують ці елементи.
Медіа кодеки і формати
Цифрові аудіо та відео дані обробляються через кодек, формулу, яка перетворює і стискає звук або відео в потік бітів для передачі через Інтернет (термін "кодек" представляє скорочене поєднання двох слів "код" і "декодування"). Коли дані доходять до кінцевого користувача, то він повинен мати той же кодек для декодування закодованого сигналу і перетворення його назад в звук або відео.
Деякі медіа кодеки запатентовані, тобто вони належать тільки одній компанії і не відносяться до відкритих стандартів, і, як правило, власники патентів зазвичай стягують ліцензійні збори за використання їх алгоритмів. Розробники браузерів, такі як Apple, Google і Microsoft, мають великий капітал і готові ліцензувати запатентовані кодеки для своїх браузерів. Інші виробники браузерів, такі як Mozilla і Opera замість цього вибирають відкриті стандарти кодеків і не використовують запатентовані їх види. Навіть не дивлячись на те, що останні версії всіх браузерів підтримують вбудовані медіа-файли HTML5, вони ще не дійшли згоди які кодеки краще використовувати.
Після того як медіа дані закодовані, вони повинні бути вміщені і упаковані для доставки в одному з декількох форматів. Ці формати є контейнерами для медіа-файлів, які передаються між сервером і клієнтом. Для програвання вбудованих медіа-файлів браузер повинен спочатку прочитати формат контейнера, а потім розшифрувати закодовані дані всередині нього. Так само, як браузери підтримують різні кодеки, вони також підтримують різні формати контейнерів для вбудованих медіа-файлів.
Вбудовані медіа-файли повинні бути передані з належним типом контенту для кожного формату, так і клієнт, і сервер зможуть розпізнати, як обробляти ці файли. Веб-сервер обробляє медіа-типи автоматично, принаймні, для найбільш поширених форматів. Для деяких нових форматів може знадобитися додаткове регулювання параметрів сервера, зазвичай це полягає в додаванні нового типу контенту в файл конфігурації.
Нижче наведено список підтримуваних браузерами кодеків.
Firefox підтримує AAC частково - тільки в контейнері MP4 і коли операційна система підтримує цей формат.
Тег <audio>
Елемент <audio> впроваджує звуковий файл на веб-сторінку. Це замінний елемент, але він не належить до порожніх елементів, тому він може містити і власний контент, і інші елементи. У своїй простій формі елемент <audio> повинен мати тільки атрибут src, який вказує шлях до звукового файлу:
<audio src="audio/file.mp3"></audio>
Однак він рідко використовується в такій простій формі. За замовчуванням елемент <audio> не має елементів управління і тому повністю невидимий. Він буде розташовуватися в HTML-документі і може бути доступний в браузері або JavaScript, але просте впровадження аудіо файлу не принесе особливої користі. За допомогою логічного атрибута ,code>controls
можна додати до аудіо-файлу його власні елементи управління, які будуть відображатися на веб-сторінці в місці розташування елемента <audio>:
<audio src="audio/file.mp3" controls></audio>
Ці елементи управління надаються браузером і можуть візуально відрізнятися в залежності від браузера, але надані функції залишаються незмінними:
кнопка play/pause;
полоса прокрутки;
відображення часу;
гучність.
Рис. 1 Так виглядає елемент управління у браузері Mozilla Firefox
Елемент <audio> може містити один або кілька елементів <source>, кожен з яких буде посилатися на свій аудіо-файл. Це буде корисно через відсутність єдиного формату, підтримуваного усіма браузерами. В цьому випадку браузер буде програвати перший медіа-файл, який він підтримує, ігноруючи всі інші:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Audio</title>
</head>
<body>
<p><b>Вагнер, "Політ валькірій". Фрагмент</b></p>
<audio controls>
<source src="audio/Wagner-Ride_of_the_Valkyries_.ogg" type="audio/ogg;
codecs=vorbis">
<source src="audio/Wagner-Ride_of_the_Valkyries_.mp3" type="audio/mpeg">
Тег audio не підтримується вашим браузером.
<a href="audio/Wagner-Ride_of_the_Valkyries_.mp3">Завантажте музику</a>.
</audio>
</body>
</html>
Атрибути
autoplay − звук починає грати відразу після завантаження сторінки.
controls − додає панель управління до аудіофайлу.
loop − повторює відтворення звуку з початку після його завершення.
muted − відключає звук при відтворенні музики.
src − вказує шлях до файлу, який програться.
Тег <video>
Елемент <video> вбудовує цифрове відео на веб-сторінку. Як і у випадку з <audio>, елемент <video> може мати атрибут src, який вказує URL-адресу відеофайлу:
<video src="video/file.mp4" controls></video>
Атрибути
autoplay − відео починає відтворюватися автоматично після завантаження сторінки.
controls − додає панель управління до відеоролика.
height − задає висоту області для відтворення відеоролика.
loop − повторює відтворення відео від початку після його завершення.
poster − вказує адресу картинки, яка буде відображатися, поки відео недоступне або не відворюється.
preload − використовується для завантаження відео разом із завантаженням веб-сторінки.
src − вказує шлях до відеоролика, який прорається.
width − задає ширину області для відтворення відеоролика.
Елемент <video> також може містити один або кілька елементів <source>, які будуть вказувати на файли різних форматів:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video</title>
</head>
<body>
<p><b>Вагнер, "Політ валькірій", фрагмент</b><p>
<video width="320" height="240" controls="controls"
poster="images/valkiriya.jpg">
<source src="video/Ride_of_the_Valkyries.mp4" type="video/mp4">
<source src="video/Ride_of_the_Valkyries.ogv" type="video/ogg">
Ваш браузер не підтримує тег video
<a href="video/Ride_of_the_Valkyries.mp4">Завантажте відео</a>
</video>
</body>
</html>
Вставка відео з YouTube
Вартий уваги спосіб вставки на веб-сторінку відео, яке розташоване на відео-хостінгу . По-перше, відео не буде займати місце на сервері. По-друге, створивши власний канал з відо-матеріалами на youtube, можна привертати увагу користувачів до сайту. По-третє, таке відео легко зробити адаптивним до будь-якого розміру екрану, вставивши його у контейнер <div>, для якого і задаються адаптивні розміри.
Окрім того, вставити відео у такий спосіб досить просто.
0. Необхідно перейти на сторінку потрібного відео на youtube.com.
1. Натиснути кнопку "Поділитися" під відео
2. Обрати "Вставити"
3. Натиснути "Копіювати"
4. Вставити у html-документ з буфера обміну скопійований код. Щоб відео було адаптивним, необхідно огорнути цей тег у контейнер <div>, якому у стилях надають адаптивні розміри (дивіться наступний приклад).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video</title>
</head>
<style>
.video {
position:relative;
padding-bottom:56.25%;
padding-top:25px;height:0;
}
.video iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
<body>
<div class="video">
<iframe src="https://www.youtube.com/embed/-FIDRWpYR3U"
width="560" height="315"
frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
</body>
</html>
До цього часу ми переглянули багато тексту в цьому курсі, але Інтернет буде справді нудним лише за допомогою тексту. Давайте почнемо дивитись на те, як зробити веб-сайт живим, з більш цікавим вмістом! Цей модуль вивчає, як використовувати HTML для включення мультимедійних даних на ваші веб-сторінки, в тому числі різні способи додавання зображень, а також можливість вставки відео, аудіо та навіть цілих веб-сторінок.
Перш ніж запускати цей модуль, ви повинні мати достатні знання про основи HTML, як це було описано раніше в "Вступ до HTML". Якщо ви не працювали через цей модуль (або щось подібне), спочатку спробуйте його, а потім поверніться!
Довідники
Цей модуль містить наступні статті, в яких ви знайдете всі основи вставки мультимедіа на веб-сторінках.
Існують і інші види мультимедійних засобів, але це логічно починати з скромного елемента <img> (en-US), який використовується для вставки простого зображення на веб-сторінку. У цій статті ми подивимося, як використовувати його більш глибоко, включаючи основні, анотований його підписом за допомогою <figure> (en-US) і як він відноситься до фонових зображень CSS.
Далі ми розглянемо, як використовувати HTML5 елементи <video> та <audio> (en-US), щоб вставити відео та аудіо на наші сторінки; включаючи основи, надання доступу до різних форматів файлів до різних веб-переглядачів, додавання субтитрів та субтитрів, а також можливість додавання відмов для застарілих веб-переглядачів.
Від <object> до <iframe> - інші технології вбудовування
На цьому етапі ми хотіли б трохи побороти крок, поглянувши на кілька елементів, які дозволяють вставляти різноманітні типи вмісту на свої веб-сторінки: <iframe>, елементи <embed> (en-US) і <object> (en-US). <iframe> для вбудовування інших веб-сторінок, а інші два дозволяють вставляти PDF-файли, SVG і навіть Flash-технологію на виході, але які ви все ще можете побачити напів-регулярно.
Додавання векторної графіки до Інтернету
Векторна графіка може бути дуже корисною в певних ситуаціях. На відміну від звичайних форматів, таких як PNG / JPG, вони не спотворюють / пікселюються при збільшенні - вони можуть залишатися гладкими при масштабування. Ця стаття знайомить вас із векторною графікою та як включити популярний SVG формат на веб-сторінках.
За допомогою настільки різних типів пристроїв, які тепер можуть переглядати веб-сайти - від мобільних телефонів до настільних комп'ютерів - важливим поняттям для оволодіння сучасним веб-сайтом є чудовий дизайн. Це стосується створення веб-сторінок, які можуть автоматично змінювати свої функції відповідно до різних розмірів екрана, дозволів і т. Д. Це буде детально розглянуто в модулі CSS пізніше, але зараз ми розглянемо інструменти HTML доступний для створення чутливих зображень, включаючи елемент <picture> (en-US).
Розміщення та відтворення на веб-сторінках мультимедійних даних.
Для програвання звукових файлів на комп'ютері повинна бути встановлена звукова карта та програма для відтворення звуку.
Створення фонового звучання. Тег <BGSOUND> задає фонові звуки чи музику при перегляді документу (аудіо- об’єкти повинні мати такі розширення: .mp3,.WAV, .AU, MIDI). Інші параметри задаються атрибутами даного тега:
src==”URL адреса аудіо-об’єкта”;
LOOP=n
Визначає частоту програвання відео- кліпу (скільки разів). Якщо n=-1, або LOOP=INFINITE, то кліп програється безперервно.
Наприклад:
<BGSOUND SRC="audio.mp3" LOOP=1> - створення фонової музики.
Створення посилань на аудіо-файл. Вставити необхідний аудіо-файл можна за допомогою текстових чи графічних гіперпосилань.
Приклад вставки аудіо- об’єкта за допомогою текстового гіперпосилання:
<a href="audio.mp3">Музика</a>
Приклад вставки аудіо- об’єкта за допомогою графічного гіперпосилання:
<a href="audio.mp3"> <img src="img/animacia.gif" align="right" HSPACE=30 VSPACE=5 Alt=”Музика”> </a>
Вставка на веб-сторінку відео- об’єктів.
Для перегляду відеоматеріалів на компютері повинна бути встановлена відео карта та відповідне програмне забезпечення. На веб-сторінку можна вставити невеликі за обсягом відео-кліпи, що мають розширення .avi, .flv. Для їх вставки використовують вже відомий тег <img> та відповідні атрибути:
DYNSRC=”URL адреса відео-об’єкта”
CONTROLS
Цей атрибут керує переглядом відео- кліпу. Якщо він присутній, то кліп стартує по команді користувача.
START=
Задає умову початку програвання звукового файу, заданого атрибутом DYNSRC=. Його значення можуть бути слідуючими:
FILEOPEN
Розпочати програвання як тільки завершиться завантаження (виконується по замовчуванню).
MOUSEOVER
Розпочати програвання після вказівки мишкою користувачем.
WIDTH=n - задає розміри довжини вікна прокрутки відео- кліпу;
HEIGHT=n - задає розміри ширини вікна прокрутки відео- кліпу;
ALIGN=... - задає розташування відео- кліпу (right, left, center).
LOOP=n
Визначає частоту програвання відео- кліпу (скільки разів). Якщо n=-1, або LOOP=INFINITE, то кліп програється безперервно.
Приклад вставки відео- об’єкта на веб-сторінку:
<IMG DYNSRC="video.flv" START=MOUSEOVER LOOP=1
WIDTH=300 HEIGHT=200 ALIGN=left>
Рухомий текстовий рядок.
<marquee>...</marquee>
Behavior= поведінка рядка (Scroll - звичайна прокрутка, Slide - рядок добігає до кінця і зупиняється, Alternate - рядок рухатиметься від краю до краю).
<marquee height=30 width=900><font color=red><h1 align=center>Привіт! Це мій перший сайт!</h1></font></marquee><br>