- 1. Елемент <video>
- 2. Вбудований інтерактивний контент
- 3. Відеокодеки
- 4. Відеоконтейнер
- 5. Альтернативні медіа-ресурси
- 6. Додавання субтитрів і заголовків
- 7. Приклад: розміщуємо відео на сайті
- 8. відеоконвертер
Раніше, якщо ви хотіли додати відео на веб-сторінку, вам доводилося використовувати елемент <object>, що представляє собою універсальний контейнер для зовнішніх об'єктів. Подібні програми були в малому ступені інтерактивними і слабо взаємодіяли з оточуючими їх елементами на веб-сторінці.
Другий підхід полягав у використанні модуля браузера, наприклад Silverlight або Flash. І хоча технологія Flash дозволяла використовувати готовий відеоплеєр або створювати власний, але її використання породжувало велике нагромадження HTML-розмітки, а відеофайли потрібно було кодувати в необхідний формат.
HTML5-відео - новий стандарт для розміщення мультимедійних файлів в мережі з оригінальним програмним інтерфейсом без залучення додаткових модулів. За допомогою елемента <video> з'явилася можливість додавати відеовміст на веб-сторінки, а також стилізувати зовнішній вигляд відеоплеєра за допомогою css-стилів.
Мал. 1. Зовнішній вигляд відеоплеєра в основних браузерах
1. Елемент <video>
підтримка браузерами
IE: 9.0, атрибут muted - з 10.0
Edge: 12.0
Firefox 3.5
Chrome: 4.0, атрибут muted - з 30.0
Safari: 4.0, атрибут muted - з 5.0
Opera: 11.5
iOS Safari: 3.2
Android Browser: 2.3
Chrome for Android: 44
У найпростішому варіанті HTML-розмітка для розміщення відеофайлу на сторінці має наступний вигляд:
<Video src = "video.ogv" controls> </ video>
Атрибут controls відповідає за появу елементів управління відеоплеєром. Ви можете додати зображення за допомогою атрибута poster, яке браузер буде використовувати, поки завантажується відео або поки користувач не натисне на кнопку відтворення, а також задати висоту і ширину відео.
Як і у випадку з аудіофайлами, рекомендується перераховувати в <source> всі формати, починаючи з більш пріоритетним. Також потрібно вказувати MIME-тип для кожного відеофайлу.
<Video controls width = "400" height = "300"> <source src = "video.mp4" type = "video / mp4"> <! - MP4 для Safari, IE9, iPhone, iPad, Android, і Windows Phone 7 -> <source src = "video.webm" type = "video / webm"> <! - WebM / VP8 для Firefox4, Opera, і Chrome -> <source src = "video.ogv" type = " video / ogg "> <! - Ogg / Vorbis для старих версій браузерів Firefox і Opera -> <object data =" video.swf "type =" application / x-shockwave-flash "> <! - додаємо відеоконтент для застарілих браузерів, в яких немає підтримки елемента video -> <param name = "movie" value = "video.swf"> </ object> </ video> Таблиця 1. Атрибути тега <video> Атрибут Опис, прийняте значення autoplay Автоматичне відтворення відеоофайла відразу ж після завантаження сторінки. controls Вказує браузеру, що потрібно відобразити базові елементи управління відтворенням (відтворення, пауза, гучність). height Задає висоту вікна для відображення відеоданих, можливі значення: px або% loop Циклічне відтворення відеофайлу. muted Вимикає звук при відтворенні відеозапису. poster URL файлу зображення, яке буде відображатися під час завантаження відеофайлу або до тих пір, поки користувач не натисне на кнопку PLAY. Якщо атрибут не заданий, то буде відображатися перший кадр відеофайлу. preload Атрибут, який відповідає за попередню завантаження відеоконтенту. Чи не є обов'язковим, деякі браузери ігнорують його. Можливі значення:
auto - браузер завантажує відеофайл повністю, щоб він був доступний, коли користувач почне його відтворення.
metadata - браузер завантажує першу невелику частину відеофайлу, щоб визначити його основні характеристики.
none - відсутність автоматичного завантаження відеофайлу. src Містить абсолютний або відносний URL-адресу відеофайлу. width Задає ширину вікна для відображення відеоданих, можливі значення: px або%
2. Вбудований інтерактивний контент
Елемент <embed> визначає контейнер для зовнішнього застосування або інтерактивного вмісту (іншими словами, плагіна). Більшість браузерів підтримувало даний елемент протягом довгого часу. Проте, даний тег не був включений в специфікацію HTML4, його додали в специфікацію HTML5. За допомогою <embed> на веб-сторінки можна додавати не тільки відеофайли, а й векторні зображення у форматі swf:
<Embed src = "movie.mov" type = "video / quicktime" width = "640" height = "480"> <embed src = "helloworld.swf"> Таблиця 2. Атрибути тега <embed> Атрибут Опис, прийняте значення height Визначає висоту вбудованого контенту в px або%. src Містить абсолютний або відносний URL-адресу медіафайлу. type Визначає MIME-тип вбудованого файлу. width Визначає ширину вбудованого контенту в px або%.
3. Відеокодеки
При перегляді відео програвач повинен його декодувати. Одні програвачі використовують програмне декодування відеопотоку, інші використовують апаратне декодування.
Важливо! Оскільки кожен браузер підтримує певний кодек, тому, щоб забезпечити відтворення відео-контенту в усіх браузерах, відео-файл потрібно розміщувати в декількох форматах.
H.264 - високоякісний кодек від фірми MPEG, ділиться на профілі для підтримки як пристроїв з мінімальними можливостями, так і пристроїв з високою роздільною здатністю.
Ogg Theora - відкритий безкоштовний стандарт для відео, якість і продуктивність трохи нижче стандарту H.264.
VP8 - відкритий безкоштовний кодек, подібний за якістю з H.264. Підтримується в Firefox, Chrome і Opera.
4. Відеоконтейнер
Мал. 2. Відеоконтейнер
Будь відеофайл є файловим контейнером, в якому зберігаються інші файли. Аудіо- і відеодоріжки об'єднуються для відтворення відеоролика. Метадані містять інформацію про даному відеоролику - зображення обкладинки, субтитри тощо. До популярних форматів Відеоконтейнер відносяться наступні:
Ogg (.ogv, .oga, .ogx, .ogg) - формат-контейнер з відкритим вихідним кодом для видеокодека Theora і аудіо Vorbis. Працює в Firefox, Chrome і Opera.
MIME-тип: video / ogg.
MPEG 4 (.mp4) - формат-контейнер для видеокодека H.264 і аудиокодека AAC. Працює в Safari і Chrome. Кодує відео, в тому числі високої чіткості, для повного спектру пристроїв, таких як iPhone, iPod і iPad.
MIME-тип: video / mp4.
WebM (.webm) - формат-контейнер з відкритим вихідним кодом для видеокодека VP8 від Google і аудиокодека Ogg Vorbis. Працює в Firefox, Chrome, Opera і Adobe Flash Player.
MIME-тип: video / webm.
Audio Video Interleave (.avi) - формат призначений для запису звуку і рухомих зображень, відповідає специфікації RIFF.
MIME-тип: video / vnd.avi, video / avi, video / msvideo, video / x-msvideo.
Matroska (.mkv) - популярний Відеоконтейнер, може містити відео в форматі H.264, VP8 або Theora.
MIME-тип: video / x-matroska, audio / x-matroska.
На даний момент браузери підтримують три основних відео формату:
Формат відеокодек Аудіокодек .mp4 H.264 AAC .ogg / .ogv Theora Vorbis .webm VP8 Vorbis
Відео в форматі .avi на сайті засобами HTML5 не чути. Тому його необхідно перекодувати в ці три формату з відповідними відео і аудіокодеками для виведення на сайті. Для цього можна використовувати відеоконвертер, зазначені на сторінці нижче.
5. Альтернативні медіа-ресурси
Елемент <source> використовується для вказівки кількох медіа-ресурсів для <audio> і <video>. Додає альтернативні відео / аудіо файли, які браузер може вибрати із запропонованих на підставі підтримуваного їм типу носія або кодека.
Таблиця 3. Атрибути тега <source> Атрибут Опис, прийняте значення media Визначає тип медіа-пристрої (тобто для яких пристроїв оптимізований файл). src Містить абсолютний або відносний URL-адресу медіафайлу. type Визначає MIME-тип медіафайлу.
6. Додавання субтитрів і заголовків
Елемент <track> використовується в якості дочірнього елемента <audio> і <video>. Додає текстову доріжку для субтитрів, заголовків медіафайлів або іншої текстової інформації, яка повинна бути видна під час відтворення медіа-ресурсу.
Таблиця 4. Атрибути тега <track> Атрибут Опис, прийняте значення default Вказує, що дана доріжка відтворюється за замовчуванням. Тільки один елемент <track> може містити даний атрибут. kind Вказує тип текстової доріжки, за замовчуванням виводяться субтитри (subtitles). Прийняті значення:
captions - переклад діалогів і звукових ефектів, що відображається у вигляді тексту поверх відео (для глухих користувачів).
chapters - додає назви глав у вигляді списку для навігації по медіафайлів.
descriptions - додає звукове опис того, що відбувається в відео (для незрячих користувачів).
metadata - метадані, які використовуються скриптами, не відображаються для користувачів.
subtitles - текстове дублювання звукової доріжки відео, відображається у вигляді субтитрів до відео. label Додає назва доріжки. Якщо цей атрибут не заданий, браузер застосує значення за замовчуванням. src Містить абсолютний або відносний URL-адресу аудіо-або відеофайлу. srclang Мова поточного запису.
7. Приклад: розміщуємо відео на сайті
1. Декодируем відео в три файли з відповідними відео і аудіокодеками:
для .mp4 - H.264 / AAC,
для .webm - VP8 / Vorbis,
для .ogv - Theora / Vorbis.
2. Розміщуємо код для вставки відео на сайт за допомогою HTML5-розмітки, використовуючи атрибути для завдання відео необхідних параметрів:
<Video controls width = "710" height = "538" poster = "/ examples / media / martynko.png" preload = "none"> <source src = "/ examples / media / martynko.mp4" type = "video / mp4 "> <source src =" / examples / media / martynko.webm "type =" video / webm "> <source src =" / examples / media / martynko.ogv "type =" video / ogg "> </ video >
4. Якщо ви хочете вирівняти відеоплеєр на сторінці, потрібно обернути елемент <video> в контейнер <div> з присвоєним класом, для якого задаються ширина і висота, що відповідають розмірам вашого відео. Далі, за допомогою css-властивостей можна задати відступи, вирівнювання на сторінці і т.д.
8. відеоконвертер
Movavi - дозволяє конвертувати відео і аудіо в необхідний вам формат. Зберігає мультимедійні дані для програвання на мобільних пристроях. «Розумні» готові профілі дозволяють добиватися максимального якості.
Перейти на сайт
ONLINE-CONVERT - безкоштовний онлайн-конвертер, що дозволяє конвертувати будь-які медіа-файли з одного формату в інший.
Перейти на сайт
Firefogg - модуль розширення для Firefox, може створювати відеофайли Theora і WebM. Працює безпосередньо в браузері, але вся робота виконується локально без звернення до веб-сервера.
Перейти на сайт