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

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

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

 

 

 

В 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="http://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="EN" 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 для видео размеченных схемой VideoObject на сайте Яндекса в разделе Вебмастер . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или 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:

<audio autoplay> или <audio autoplay="autoplay">
<video autoplay> или <video autoplay="autoplay">

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

 

атрибут controls:

<audio controls> или <audio controls="controls">
<video controls> или <video controls="controls">

• атрибут controls дает команду браузеру показывать панель управления плеером, когда страница загрузилась, но воспроизведение записи на начато. Этот атрибут также как и атрибут autoplay задается только присутствием в теге <audio> или <video>, и не требует значения, достаточно только его присутствия. По умолчанию этот атрибут отсутствует, т.е. плеер не показывает панель управления до начала воспроизведения. Когда же проигрывание файла будет запущено, то панель управления будет появляться при наведении указателя мыши на область плеера.

 

атрибут loop:

<audio loop> или <audio loop="loop">
<video loop> или <video loop="loop">

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

 

атрибут preload:

<audio preload="none | metadata | auto">
<video preload="none | metadata | auto">

• атрибут preload определяет загрузку файла вместе с загрузкой web страницы и принимает одно из следующих трех значений:
  • none - не выполнять загрузку файла вместе с загрузкой web страницы. Это значит, что файл начнет загружаться в плеере только после нажатия кнопки воспроизведения. Это может быть удобным для ускорения загрузки страницы. Значение none является значением по умолчанию для атрибута preload, поэтому для него можно вообще не вставлять атрибут preload в тег <audio> или <video> для этого случая.
  • metadata - не выполнять загрузку файла вместе с загрузкой web страницы, но выполнять загрузку метаданных мультимедийного файла.
  • auto - выполнять полную загрузку файла вместе с загрузкой web страницы. В этом варианте браузеры будут автоматически подгружать медийный файл вместе с web страницей, но это не будет мешать загрузке самой страницы и ее отрисовки в браузере. Если в теге <audio> или <video> задан атрибут preload="" с пустым значением, то будет использовано значение auto для него.
  • Значение атрибута preload будет отменено, если использован атрибут autoplay.

 

атрибут src:

<audio src="URL">
<video src="URL">

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

 

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

<video poster="URL">

• атрибут poster используется только в теге <video> и задает URL изображения (gif, png, jpeg и т.п.), которое будет показано пока видео не доступно. Если атрибут poster не задан, то плеер браузера будет пытаться показать первый кадр видео.

 

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

<video height="число">
<video width="число">

• атрибуты width и height применяются только к тегу <video> и задают, соответственно, ширину и высоту области воспроизведения видеоплеера. В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только width, а по высоте плеер подстроиться сам.
• Если какой-либо из этих параметров или оба не будут заданы, то тогда не заданный(е) параметр(ы) будут браться от соответствующего размера картинки, указанной в атрибуте poster.
• Если же атрибут poster будет отсутствовать, то эти параметры будут устанавливаться как: для width = 300px и для height = 150px. Что бы не высчитывать и не согласовывать размеры области видео под пропорции самого клипа, я бы рекомендовал задавать только одни параметр width, тогда высота (height) области воспроизведения будет выбрана автоматически исходя из пропорций видео.
• Также, на размеры и оформление HTML5 плеера можно влиять через свойства CSS применяемые к тегам <audio> или <video>.

 

Атрибут muted:

<audio muted> или <audio muted="muted">
<video muted> или <video muted="muted">

• атрибут muted устанавливает своим наличием в тегах <audio> или <video> звук в выключенное состояние в HTML5 плеере. По умолчанию атрибут отсутствует.

 

Атрибут crossorigin:

<video crossorigin="anonymous">

• атрибут 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>выглядит так:

<source src="URL to file.mp4" type="video/mp4">
<source src="URL to file.mp3" type="audio/mpeg">

и в нем присутствует всегда атрибут src и type, который в большинстве случаев имеет только MIME-тип.

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

 

Тег <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.

00:00:01.000 --> 00:00:10.000  -это простой пример временной метки в формате hh:mm:ss.mmm

00:00:15.000 --> 00:00:20.000 A:middle T:50%  - метка может содержать дополнительные атрибуты, указывающие на месторасположение текста для нее в области просмотра видео.

 

Пример файла формата WEBVTT для субтитров на ru

WEBVTT

00:00:01.000 --> 00:00:10.000
Это первая строка с 1-10 секунды

00:00:15.000 --> 00:00:20.000
Это вторая строка текста
разделенная на две линии

Пример файла subtitles.vtt 

Пример файла captions.vtt 

Пример файла chapters.vtt 

 

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

Пример тегов <track>:

<track kind="subtitles" label="EN" src="URL to subtitles.vtt" srclang="en" default>
<track kind="subtitles" label="RU" src="URL to subtitles-ru.vtt" srclang="ru">