Andew.ru | Реалізація video і audio в HTML5, шаблони, schema.org мікророзмітки

У статті описані будова audio і video контейнера HTML5, теги video, audio, source, track і їх атрибути з можливими значеннями. Наведено HTML шаблони і приклади реалізації відтворення мультимедійних файлів на основі вбудованих в браузер можливостей. Показано підключення до відео текстової доріжки субтитрів, заголовків, змісту за допомогою файлів формату WEBVTT з прикладами. Представлені HTML5 шаблони коду з мікророзмітки по schema.org для аудіо та відео. Вказані основні для web формати аудіо і відео файлів з їх MIME типами і інструменти для конвертації відео і аудіо в ці формати.

У HTML5 присутні нові можливості, що дозволяють виконувати програвання аудіо і відео файлів безпосередньо браузером без використання сторонніх програм. Поки, незважаючи на те, що HTML5 вже не новина, є ще розбіжність у тому, як браузери обробляють теги video і audio і як відображають сам плеєр. Одні це роблять все краще з кожною новою версією, інші поки що відстають. Глобально ж, тенденція йде до того, що браузери надаватимуть все більше функціоналу для програвання мультимедіа файлів.

Скрінкасти: Відео огляд цієї статті

Дивитися на YouTube

HTML5 video не підтримується у вашому браузером. Скачати відео

Скрінкасти: відео огляд статті Реалізація video і audio в HTML5, шаблони, schema.org мікророзмітки на сайті Andew.ru

Автор: Andrey Boldyrev

Скрінкасти: Приклад використання шаблонів

HTML5 video не підтримується у вашому браузером. Скачати відео

Скрінкасти: приклади використання шаблонів зі статті Реалізація video і audio в HTML5, шаблони, schema.org мікророзмітки - andew.ru

Автор: Andrey Boldyrev

У HTML5 відтворення браузером аудіо та відео файлів реалізується за допомогою тегів <audio> і <video>, які надають керований сценаріями об'єкт. Використання цих тегів дозволяє програти мультимедійний файл на web сторінці, управляти його відтворенням шляхом завдання атрибутів для тегів <audio> і <video>, і додаткових, вкладених в них тегів. У найпростішому варіанті використання досить вставити на web сторінку потрібний вам тег <audio> або <video> та задати через їх атрибути кілька параметрів. І це вже дозволить програти мультимедіа файл на сторінці в HTML5 плеєрі. Також, оскільки елементи <audio> і <video> є об'єктами для JS, у них доступні властивості, методи і події, що надає розширені можливості повного управління HTML5 плеєром через JavaScript . Однак, з огляду на те, що браузери можуть мати відмінності в реалізації управління об'єктами аудіо і відео за допомогою JS, то більш кращим вибором для цих цілей буде використання спеціальних кросбраузерності JS бібліотек. Одна з таких бібліотек під назвою videojs буде описана в окремому пості. До тегам <audio> і <video>, як і до інших тегами HTML застосовна стилізація за допомогою CSS. Детальну специфікацію для аудіо та відео в HTML5 можна подивитися на сайті World Wide Web Consortium .

HTML5 відео і аудіо розвивається стандарт і він не пов'язаний ні з одним форматом аудіо або відео, тому між браузерами існують відмінності в підтримуваних ними форматами аудіо і відео файлів. Ця різниця зараз компенсують тим, що кодують оригінальний файл кількома різними кодеками і підключають всі ці версії файлів до тегам <audio> або <video> через вкладені теги <source src = "URL">. Однак серед підтримуваних браузерами форматів аудіо та відео файлів намічаються лідери. Для відео це, звичайно ж, формат mp4 (H.264), і для аудіо це формат mp3 і m4a. Зараз вже, напевно, всі браузери здатні програвати файли цих форматів. Так само, браузери Firefox, Chrome і Opera домовилися підтримувати стандарт WEBM в якості загального відео формату. З моєї точки зору, оптимальним на зараз варіантом використання HTML5 відео і аудіо буде схема заснована на використанні одного мультимедійного файлу в форматі mp4 (H.264) для відео і m4a для аудіо і JS HTML5 плеєра. До аудіо або відео контейнеру підключається тільки один файл в зазначеному форматі. Зараз більшість браузерів здатні відтворювати mp4 формат. Підключена ж JS бібліотека виконає стилізацію вбудованого в браузер плеєра. Якщо браузер не підтримуватиме формат mp4 / m4a, то JS плеєр, в такому випадку, реалізує підключення Flash плеєра для відтворення мультимедійних файлів. З огляду на, що mp4 формат став сильно популярний, можна сподіватися на низьку ймовірність проблем з його відтворенням в браузерах. Така схема вимагає наявність всього одного мультимедійного файлу в зазначеному форматі, що економить місце на диску і ресурси для обробки файлів. Також, така схема буде стратегічно більш правильною, так як тенденція йде до того, що браузери все більше і краще виконують реалізацію HTML5 відео і аудіо.

Для вказівки HTML5 плеєру файлу, потрібно, крім URL файлу, передати і MIME тип файлу, що б браузер розумів який кодек йому потрібно використовувати. Нижче в таблиці привожу найбільш поширені формати файлів і їх MIME типи.

Формати файлів і їх MIME типи

Файли мультимедіа Розширення Mime тип Аудіо mp3 mp3 audio / mpeg Аудіо mp4 m4a audio / mp4 Аудіо webm webm audio / webm Аудіо ogg ogg audio / ogg Відео mp4 (H.264) mp4 video / mp4 Відео webm webm video / webm Відео ogg ogv video / ogg

Інструменти кодування аудіо та відео файлів

Для кодування відео і аудіо файлів в наведені вище web формати можна скористатися відкритою програмою Miro Video Converter , Яка підтримує конвертацію аудіо і відео файлів в основні поширені для вебу формати (MP4, WebM, Ogg Theora, MP3 і т.п.). Miro Video Converter доступний для різних операційних систем - Windows, Mac і Linux і є графічною оболонкою для консольних утиліт ffmpeg і ffmpeg2theora , Які зручно використовувати на web сервері для обробки завантаження відео і аудіо в автоматичному режимі.

Приклад стандартного використання HTML5 тега <audio>:

HTML5 код прикладу audio з мікророзмітки schema.org:

<Div itemscope itemtype = "http://schema.org/AudioObject"> <h3 itemprop = "name"> Тема аудіо </ h3> <meta itemprop = "description" content = "Опис аудіо ..."> <! - additional schema.org data -> <meta itemprop = "isFamilyFriendly" content = "true"> <meta itemprop = "encodingFormat" content = "mp3"> <meta itemprop = "duration" content = "PT04M59S"> < meta itemprop = "uploadDate" content = "2015-12-31"> <meta itemprop = "image" content = "Full URL to image.jpg"> <meta itemprop = "alternateName" content = "Альтернативний заголовок аудіо"> < ! - end of additional data -> <audio controls preload = "none"> <source src = "URL to file.mp3" type = "audio / mpeg" /> <source src = "URL to file.ogg" type = "audio / ogg" /> <source src = "URL to file.m4a" type = "audio / mp4" /> <p> HTML5 audio не підтримується у вашому браузером. </ p> <p> <a itemprop = "contentUrl" href = "URL to file.mp3"> Завантажити audio </a> </ p> </ audio> <p itemprop = "author" itemscope itemtype = "ht tp: //schema.org/Person "> Автор <a href="URL" itemprop="url"> <span itemprop =" name "> Ім'я автора </ span> </a> <meta itemprop =" image " content = "Full url to person.jpg"> </ p> </ div>

Так виглядатимуть витягнуті з коду дані мікророзмітки для описаного вище шаблону аудіо.

audioobject itemType = http://schema.org/AudioObject name = Тема аудіо description = Опис аудіо ... isfamilyfriendly = true encodingformat = mp3 duration = PT04M59S uploaddate = 2015-12-31 image = Full URL to image.jpg alternatename = Альтернативний заголовок аудіо contenturl href = URL to file.mp3 text = Завантажити audio author person itemType = http://schema.org/Person url href = URL text = Ім'я автора name = Ім'я автора image = Full url to person.jpg

Мінімальна розмітка аудіо по schema.org повинна включати itemprop = "name", itemprop = "description", itemprop = "contentUrl". Решта властивості не є обов'язковими.

Приклад стандартного використання HTML5 тега <video>:

У демонстрації я застосував для тега <video> через атрибут class CSS стилі, що роблять ширину області відео динамічної залежно від розміру екрана. По висоті плеєр підлаштуватися сам. Спробуйте змінити розмір вікна браузера для того, щоб побачити це працює. Тому в джерелі коду цієї демонстрації немає атрибутів width і height для тега <video>, їх замінюють CSS стилі. Але в лістингу коду шаблону цей приймемо не показаний, тому що є вже частностью.

HTML5 код прикладу video з мікророзмітки schema.org:

<Div itemscope itemtype = "http://schema.org/VideoObject"> <h3 itemprop = "name"> Тема відео </ h3> <div itemprop = "thumbnail" itemscope itemtype = "http://schema.org/ ImageObject "> <img itemprop =" contentUrl "src =" URL to video-thumbnail.jpg | png "/> <meta itemprop =" width "content =" 100 "> <meta itemprop =" height "content =" 100 " > </ div> <p> <a href="URL"> Дивитися на YouTube </a> </ p> <meta itemprop = "duration" content = "PT14M59S"> <meta itemprop = "isFamilyFriendly" content = " true "> <meta itemprop =" uploadDate "content =" 2015-12-31 "> <meta itemprop =" description "content =" Короткий опис для відео ... "> <video width =" 300 "height =" 150 "controls preload =" none "poster =" URL to video-poster.jpg | png "> <source src =" URL to file.mp4 "type =" video / mp4 "/> <source src =" URL to file. webm "type =" video / webm "/> <source src =" URL to file.ogv "type =" video / ogg "/> <track kind =" subtitles "label =" RU "src =" URL to subtitles- ru.vtt "srclang =" ru "default> <track kind =" subtitles "label =" E N "src =" URL to subtitles.vtt "srclang =" en "> <p> HTML5 video не підтримується у вашому браузером. </ P> <p> Завантажити відео: <a itemprop =" url "href =" URL to file .mp4 "> Тема відео </a> </ p> </ video> <p itemprop =" author "itemscope itemtype =" http://schema.org/Person "> Автор відео <a itemprop =" url "href = "URL to author web page"> <span itemprop = "name"> author name </ span> </a> <meta itemprop = "image" content = "Full URL to author.jpg"> </ p> < img style = "display: none;" itemprop = "thumbnailUrl" src = "URL to file.jpg | png" /> </ div>

Так виглядатимуть витягнуті з коду дані мікророзмітки для описаного вище шаблону відео.

videoobject itemType = http://schema.org/VideoObject name = Тема відео thumbnail imageobject itemType = http://schema.org/ImageObject contenturl = URL to video-thumbnail.jpg | png width = 100 height = 100 duration = PT14M59S isfamilyfriendly = true uploaddate = 2015-12-31 description = Короткий опис для відео ... url href = URL to file.mp4 text = Тема відео author person itemType = http://schema.org/Person url href = URL to author web page text = author name name = author name image = Full URL to author.jpg thumbnailurl = URL to file.jpg | png

Мінімально необхідна для пошукових систем розмітка відео по schema.org повинна включати всі наведені в коді прикладу властивості itemprop за винятком блоку itemprop = "author", який є не обов'язковим для пошукових систем і його можна видалити, якщо немає даних для його заповнення. Для video-thumbnail яндекс вимагає вказувати мікророзмітки по schema.org як itemprop = "thumbnail" у вигляді ImageObject, а Google вимагає вказувати як itemprop = "thumbnailUrl", тому доводиться вставляти video-thumbnail файл два рази, і тому другий тег img отримав стиль display: none, що б не відображатися в браузері. Можна замість використання img тега з display: none передати це властивість тегом link через атрибут href. Також, незважаючи на те, що мікророзмітки можна передавати через не показують користувачеві теги meta і link, рекомендується все ж, по можливості, додавати мікророзмітки переважно в теги, які будуть виводитися користувачеві. Валідацію мікророзмітки schema.org можна зробити за цими посиланнями: yandex валідатор , google валідатор . Основна перевага від використання мікророзмітки полягає в зручності такого контенту для пошукових роботів і роботів соціальних мереж. Ці роботи витягують розмічені дані і агрегує їх. Тому використання мікророзмітки покращує SEO сайту і сприяє автоматичному поширенню даних в соціальних мережах. Детальний опис мікророзмітки Schema.org для відео розмічених схемою VideoObjec t на сайті Яндекса в розділі Веб-майстер . Так само, варто зауважити, що для випадків, коли ви робите вставку на свій сайт відео не безпосередньо, а за допомогою віджетів відео хостингу Яндекс.Відео або YouTube, то ви можете під блоком коду віджета додати свій блок коду HTML з описом відео і в нього вмонтувати мікророзмітки Schema.org для цього відео. При цьому, як параметр URL - посилання на відеоролик, вказати не пряме посилання на статичний файл, а задати посилання отриману від відео хостингу. Хоча в специфікації Schema.org і написано, що посилання повинне бути саме на прямий файл, але пошуковики обробляють і посилання на відео від відео хостингу (див. В прикладах на сайті Яндекса в розділі Веб-майстер), незважаючи на те, що по такому посиланню можна скачати файл і не можу побачити його безпосередньо в своєму HTML5 медіа плеєрі на сторінці, тільки в віджеті відео хостингу.

Якщо перед вами стоїть питання з якого хостингу завантажувати мультимедійні файли аудіо і відео, то подивіться статтю Yandex Disk REST API jQuery Plugin , В якій описаний варіант вставки медіа файлів на WEB сторінку з Яндекс Диска.

Атрибути <audio> і <video> тегів:

Атрибути src, preload, autoplay, mediagroup, loop, muted, controls є загальними атрибутами для всіх медійних елементів, в тому числі і для тегів <audio> і <video>.

атрибут autoplay:

атрибут autoplay задається його присутністю в тезі <audio> або <video> і для цього атрибута не потрібно задавати значення, досить просто його присутності. Для редакторів HTML, які правлять код елементів, можна поставити це атрибут як autoplay = "autoplay", що рівнозначно просто присутності атрибута. Наявність атрибута autoplay дає команду браузеру почати відтворення файлу відразу після завантаження web сторінки. Відповідно, атрибут autoplay скасовує значення атрибута preload, який керує завантаженням відео в плеєр, тому що відео має відразу почати відтворюватися, а значить і повинно бути завантажено. За замовчуванням атрибут autoplay відсутня.

атрибут controls:

атрибут controls дає команду браузеру показувати панель управління плеєром, коли сторінка завантажилася, але відтворення запису на розпочато. Цей атрибут також як і атрибут autoplay задається тільки присутністю в тезі <audio> або <video>, і не вимагає значення, досить тільки його присутності. За замовчуванням цей атрибут відсутній, тобто плеєр не показує панель управління до початку відтворення. Коли ж програвання файлу буде запущено, то панель управління буде з'являтися при наведенні покажчика миші на область плеєра.

атрибут loop:

атрибут loop змушує плеєр відтворювати файл по колу. Атрибут задається тільки його присутністю в тезі <audio> або <video> і не має параметрів. За замовчуванням атрибут loop відсутня.

атрибут preload:

атрибут preload визначає завантаження файлу разом із завантаженням web сторінки і приймає одне з таких трьох значень:
- none - не виконувати завантаження файлу разом із завантаженням web сторінки. Це означає, що файл почне завантажуватися в плеєрі тільки після натискання кнопки відтворення. Це може бути зручним для прискорення завантаження сторінки. Значення none є значенням за замовчуванням для атрибута preload, тому для нього можна взагалі не вставляти атрибут preload в тег <audio> або <video> для цього випадку.
- metadata - не виконувати завантаження файлу разом із завантаженням web сторінки, але виконувати завантаження метаданих мультимедійних файлів.
- auto - виконувати повне завантаження файлу разом із завантаженням web сторінки. У цьому варіанті браузери будуть автоматично довантажувати медійний файл разом з web сторінкою, але це не буде заважати завантаженні самої сторінки і її відтворення в браузері. Якщо в тезі <audio> або <video> заданий атрибут preload = "" з порожнім значенням, то буде використано значення auto для нього.
- Значення атрибута preload буде скасовано, якщо використаний атрибут autoplay.

атрибут src:

атрибут src тега <audio> або <video> дозволяє відразу в тезі задати шлях до мультимедійного файлу. Шлях може бути, як повним із зазначенням протоколу і домену, так і щодо кореня поточного сайту. Також шлях до файлу можна задати і у вкладених в аудіо чи відео контейнер тегах <source src = "URL">.

Атрибут poster тега video:

атрибут poster використовується тільки в тезі <video> і задає URL зображення (gif, png, jpeg і т.п.), яке буде показано поки відео недоступне. Якщо атрибут poster не заданий, то плеєр браузера буде намагатися показати перший кадр відео.

Атрибути width і height тега video:

Атрибут muted:

атрибут muted встановлює своєю наявністю в тегах <audio> або <video> звук у вимкнений стан в HTML5 плеєрі. За замовчуванням атрибут відсутній.

Атрибут crossorigin:

атрибут crossorigin вказує браузеру на необходимость Виконання CORS запиту для даного елемента. За замовчуванню атрибут відсутній, что означає НЕ використовуват CORS Предложения Взагалі. При наявності атрибута Можливі следующие значення: anonymous и use-credentials. CORS ( Cross-origin resource sharing ) - це технологія СУЧАСНИХ браузерів, яка дозволяє управляти дозволить на завантаження ресурсов на поточній web странице з других доменів, відмінніх від домену поточної Сторінки. Підтримка браузерами стандарту CORS дозволяє реалізувати безпечний кроссдоменний обмін даними через виконання спеціального запиту (заголовка) до домену поточної сторінки на предмет того, чи дозволяється завантажувати на цій сторінці ресурси з іншого зазначеного домену. Сервер на такий запит повинен вказати домени, з яких дозволена завантаження ресурсів.

Атрибут mediagroup:

<Article> <style scoped> div {margin: 1em auto; position: relative; width: 400px; height: 300px; } Video {position; absolute; bottom: 0; right: 0; } Video: first-child {width: 100%; height: 100%; } Video: last-child {width: 30%; } </ Style> <div> <video src = "movie.vid # track = Video & track = English" autoplay controls mediagroup = movie> </ video> <video src = "movie.vid # track = sign" autoplay mediagroup = movie > </ video> </ div> </ article>

атрибут mediagroup дозволяє об'єднати управління декількома медіафайлів в один MediaController через створення групи медіафайлів в різних місцях сторінки. Це група буде управлятися одночасно для всіх вхідних в неї файлів. Це зручно, наприклад, якщо потрібно програти і управляти одночасно одним і тим же роликом в різних місцях сторінки з різними субтитрами, або різними роликами.

Теги <audio> і <video> вимагають наявність закриває тега.

Для тих випадків, коли браузер не підтримує HTML5 <audio> і <video> теги, що зараз велика рідкість, перед закриває контейнер тегом пишуть текстове повідомлення і зазвичай додають посилання на скачування файлу. Якщо ж вбудований в браузер HTML5 плеєр буде додатково управлятися JS бібліотекою (JS плеєром), то більшість з них виконують підключення флеш плеєра в разі неможливості відтворення в браузері HTML5 відео і аудіо через непідтримки браузером тегів відео і аудіо або формати мультимедійних файлів.

Тег <source>:

Шлях до файлу, що також можна задати і за допомогою тега <source src = "URL"> з атрибутом src, розміщеного всередині тегів <audio> або <video>. Тег <source> не має закриваючого тега.

У більшості випадків тег <source> виглядає так:

і в ньому присутня завжди атрибут src і type, який в більшості випадків має тільки MIME-тип.

Атрибути тега <source>:

атрибут src = "URL" тега <source> задає URL до мультимедійного файлу. Шлях може бути як повним із зазначенням протоколу і домену, так і щодо кореня сайту.
атрибут type = "MIME-тип" тега <source> або більш повно type = 'MIME-тип; codecs = "кодек" 'вказує MIME-тип файлу і кодек. Для аудіо досить вказати MIME-тип, наприклад, для .mp3 - type = "audio / mpeg". Хоча за специфікацією для відео в атрибуті type потрібно вказувати і кодек, але зараз часто вказують лише MIME-тип без кодека, надаючи це на рішення браузерам.
атрибут media = "all | braille | handheld | print | screen | speech | projection | tty | tv " тега <source> вказує тип пристрою, для якого повинен відтворюватися файл. Значення за замовчуванням all, тому цей атрибут в більшості випадків не вказують взагалі, якщо не хочуть конкретно визначити пристрій для відтворення.

Тег <track>:

Для HTML5 відео можливо також відображати в плеєрі додаткову доріжку з інформацією, такий як субтитри (subtitles), заголовки (captions), глави (chapters), опису (descriptions - не підтримуються поки) і метадані (metadata - не підтримуються поки). Ця можливість реалізується шляхом додавання всередині тега <video> тегів <track> з відповідними атрибутами.

<Track kind | src | srclang | label | default> - не має закриває тега.

Тег <track> дозволяє підключати до відео додаткові файли-доріжки спеціального формату WebVTT ( Web Video Text Tracks Format ), В яких вказані виводяться текстові повідомлення з їх тимчасової прив'язкою до відео файлу. Стандарт WebVTT підтримує не просто висновок текстових повідомлень, а й надає варіанти його CSS стилізації і опції по розміщенню в області перегляду відео. На даний момент WebVTT файли в основному використовуються для підключення до відео текстових субтитрів, що підтримується майже всіма браузерами. Інші можливості WebVTT стандарту поки не повністю реалізуються самими браузерами, тому, для більш повного використання WebVTT, краще застосовувати JS плеєри. Також, файли WebVTT можуть нестандартно використовуватися JS плеєрами для передачі додаткових даних в JS плеєр, таких як, наприклад, URL превью картинок для фреймів відео. До питання про те, як показати превью кадрів відео на шкалі перемотування плеєра (Scrub Bar Thumbnails) як це зроблено на відео хостингах. Тут потрібно сказати, що такий функціонал поки відсутній у вбудованих в браузери плеєрах і тому реалізується через JS плеєри як доповнення. Для цього підключають JS бібліотеку (js плеєр), яка бере на себе управління HTML5 відео і аудіо об'єктом і виконує його стилізацію. Такі JS плеєри для показу превью кадрів відео нестандартно використовують файли WEBVTT з тега <track> для передачі через нього URL картинок превью.

Файл формату WebVTT є звичайним текстовим файлом з розширенням .vtt в якому, у вигляді порядкового списку, прописані тимчасові мітки з часом старту і часом закінчення та текстові повідомлення для виведення до цих мітках. До <video> контейнеру можна підключити декілька файлів WebVTT з текстом на різних мовах. Для кожної мови потрібно створювати окремий файл і підключати кожен через тег <track>. Теги <track> необхідно вставляти всередину контейнера <video> після всіх тегів <source>, але перед повідомленнями про помилки HTML5 відео. Тег <track> з файлом субтитрів на мові за замовчуванням потрібно розмішати першим серед тегів <track> в поточному контейнері <video>.

WEBVTT файл може містити одну і більше тимчасових міток. Файл починається зі слова WEBVTT. Порожні рядки відокремлюють між собою тимчасові мітки з належними до них текстом і атрибутами. Текст може містити елементи HTML і CSS розмітки. Перед тимчасової міткою може розташовуватися ID для неї, що б за допомогою спеціальних виразів звернутися до неї. Всі ці деталі описані в стандарті WEBVTT.

це простий приклад тимчасової мітки у форматі hh: mm: ss.mmm

A: middle T: 50% - мітка може містити додаткові атрибути, що вказують на місце розташування тексту для неї в області перегляду відео.