«Основи HTML»
Кучай А.В., Білан С.О.

2.2. Вставка відео- та аудіо-матеріалів на веб-сторінку

Хоча веб-браузери мають вбудовану підтримку зображень з найперших днів, вбудовування аудіо або відео на веб-сторінку завжди вимагало додаткових модулів (окремих програмних компонентів), які додають більше можливостей браузеру, але не є його частиною (наприклад, 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>
Переглянути

 

ЗАУВАЖЕННЯ: Переглядаючи приклад, змінюйте розмір браузера і зверніть увагу, як змінюється розмір відео. Більше про адаптивний дизайн ви дізнаєтесь у спеціальному розділі CSS.

 

Питання для самоконтролю:

  1. Як додати відео до веб-сторінки?
  2. Як додати аудіо до веб-сторінки?
  3. Що необхідно додати до коду, щоб передбачити випадок, коли браузер користувача не підтримує теги audio, video?
  4. Які функції атрибута loop?
  5. Які функції атрибута autoplay?
  6. Які функції атрибута controls?