Всесторонний обзор элемента track из HTML5

В наши видео и аудио - это обычное явление в интернете. Теперь интернет - это не только текст. Почти 40% поисковых запросов относятся к видео. С точки зрения пользователя, мультимедиа - это забавно и интерактивно. Но с точки зрения разработчика улучшение пользовательского опыта было трудной задачей, пока на помощь не пришел HTML5 и его элемент <track>.

После прочтения статьи вы будете знать, как можно добавить синхронизированные дорожки к вашим медиафайлам, вроде субтитров. Также вы узнаете, как с их помощью улучшить поисковую оптимизацию (SEO) вашего сайта.

Элемент <track>

Элемент <track> задает любой текст, который бы вы хотели показывать во время проигрывания медиафайлов. Текст может включать субтитры, подписи, описания, главы или метаданные.

Другими словами, элемент <track> позволяет указать дополнительные ресурсы с текстом, который будет отображаться синхронно с временной шкалой вашего видео или аудио файла.

Элемент <track> - это пустой элемент, то есть у него нет парного закрывающего тега (то есть, это пустой элемент). Он должен располагаться внутри тега <video> или <audio>. К тому же, если внутри аудио или видео тегов присутствует элемент <source>, то элемент <track> должен располагаться после него.

Например:

<video width="640" height="320" controls>
  <source src="some_video.mp4" type="video/mp4">
  <source src="some_video.ogg" type="video/ogg">
  <track src="some_video_subtitles.srt"
         kind="subtitles"
         srclang="en"
         label="English_subs">
</video>

Атрибут src

Этот атрибут определяет адрес текстового файла, содержащего данные дорожки, и он является обязательным. Его значением должен быть абсолютный или относительный URL. Это означает, что файлы должны быть расположены на сервере, элемент <track> не может быть использован с адресами типа file://.

Например:

<track src="video_captions.srt">

Атрибут srclang

Атрибут srclang указывает язык прикрепленного текста. Этот атрибут необходимо указывать, если значение атрибута kind выставлено в subtitles (подробнее - ниже). Значение атрибута srclang должно быть валидным языковым тегом в формате BCP47. Например, значение hi представляет Хинди, а значение en используется для Английского. На данный момент доступно около 8000 подтегов.

<track src="video_subtitles.srt" kind="subtitles" srclang="en">

Этот пример указывает, что файл субтитров представлен для английского языка.

Атрибут kind

Этот атрибут указывает тип дорожки, которую мы добавляем к медиафайлу. Он может принимать одно значение из некоторого набора, который мы рассмотрим ниже.

Субтитры (subtitles)

Обычно представляет из себя перевод диалогов, которые звучат в видео или аудио файле. Они бывают полезны, когда пользователь не понимает языка оригинала, но у него есть возможность читать перевод диалогов. Указание языка источника обязательно. Это делается путем указания соответствующего значения атрибуту srclang:

<track src="video_subtitles.srt" kind="subtitles" srclang="en">

Подписи (captions)

Подпись - краткое описание, сопровождающее видео во время проигрывания. Бывает полезно в ситуациях, когда пользователю нужно сообщить важную информацию, или если звук плохо различим или не слышен. Простой пример:

<track src="video_captions.srt" kind="captions">

Описания (descriptions)

Как понятно из наименования, данный тип трека используется для описания медиаконтента. Уместно использовать для слепых пользователей, или если видео недоступно или затемнено. Синхронные дорожки, помеченные как описания, обычно представляют собой отдельную аудиодорожку. Например:

<track src="video_descriptions.srt" kind="descriptions">

Метаданные (metadata)

Предназначен для треков, которые предоставляют метаданные. Они не отображаются браузерами. Значения метаданных предназначены для использования скриптами, вроде JavaScript. Вот пример:

<track src="video_metadata.srt" kind="metadata">

Главы (chapters)

Представляет собой заголовок, предназначен для использования в навигации по медиа-ресурсу. Дорожки, обозначенные как главы, обычно отображаются пользователю в виде интерактивного списка.

<track src="video_chapters.srt" kind="chapters">

Атрибут label

Атрибут предназначен для указания названия текстовой дорожки, подключенной к аудио/видео файлу. Используется браузерами при отображении пользователю списка доступных дорожек, и представляет собой название дорожки в удобном пользователю виде.

Если вы добавите атрибут label элементу <track>, его значение нельзя оставлять пустым, иначе код не будет валидным. Значение должно быть строковым параметром. Если атрибут отсутствует, браузер подставит значение по-умолчанию, вроде “без названия”.

<track src="video_subtitles.srt"
       kind="subtitles"
       srclang="en"
       label="Английские субтитры">

В этом примере можно видеть, что атрибут label содержит значение “Английские субтитры”.

Атрибут default

Этот атрибут принимает логическое значение (0/1), и используется для указания дорожки, которая будет выбрана по-умолчанию. Очевидно, что атрибут default может быть задан только одному элементу <track> для одного медиафайла. Такой элемент будет выбран по-умолчанию, если пользователь не выберет другую дорожку.

Следующий пример показывает, что из предложенных субтитров на разных языках (хинди, английский, японский), по-умолчанию будут выбраны и отображены вместе с видео субтитры на хинди:

<track kind="subtitles" src="video_subtitles_hi.srt" srclang="hi" default>
<track kind="subtitles" src="video_subtitles_en.srt" srclang="en">
<track kind="subtitles" src="video_subtitles_ja.srt" srclang="ja">

Теперь, когда мы рассмотрели основные атрибуты, которые могут использоваться с тегом <track>, мы распишем небольшой пример использования нескольких типов дорожек в рамках элемента video и source:

<video src="sample.ogv">
  <source src="some_video.mp4" type="video/mp4">
  <source src="some_video.ogg" type="video/ogg">
   <track kind="captions" src="video_captions.srt" srclang="en">
   <track kind="descriptions" src="video_desciptions.srt" srclang="en">
   <track kind="chapters" src="video_chapters.srt" srclang="en">
   <track kind="subtitles" src="video_subtitles_en.srt" srclang="en" default>
   <track kind="subtitles" src="video_subtitles_oz.srt" srclang="oz">
   <track kind="metadata" src="video_metadata1.srt" srclang="en" label="Метаданные 1">
   <track kind="metadata" src="video_metadata2.srt" srclang="en" label="Метаданные 2">
</video>

Полезность медиа дорожек для поисковой оптимизации

Элемент <track> открыл дорогу к оптимизации под поисковые системы для видео, а также дал возможность использовать более эффективный способ сделать ваши видео более понятными поисковым системам.

Поисковые системы все лучше понимают различное мультимедиа содержимое, и чем большим количеством информации вы можете сопроводить свои файлы, тем более таргетированный траффик, большего объема, сможете получить вы.

Некоторые ключевые преимущества поисковой оптимизации:

• Улучшает ваше присутствие в поисковой выдаче: поисковые системы при поиске проходятся по всем текстовым данным, ассоциированным с вашим видео
• Лучшая связность: поисковые системы возвращают результаты поиска, которые указывают на конкретные части видео, ассоциированные с временными кодами
• Связанное содержимое: текстовые файлы могут быть легко включены в связанное текстовое содержимое на той же странице
• Доступность и пользовательское взаимодействие: субтитры и подписи улучшают юзабилити и доступность для людей с инвалидностью
• Миниатюры в результатах поиска: у страницы с видео есть преимущество того, что она может быть отображена в результатах поиска в виде фрагмента с миниатюрой, что может повысить количество переходов по ссылкам

Поддержка браузерами

Все описанные аспекты элемента <track> неплохо поддерживаются браузерами:

• Chrome
• Firefox 31+
• IE10+
• Safari 6+
• Opera 15+

Демонстрация и заключение

Посмотреть на элемент <track> в действии можно по этим двум ссылкам:

• IE’s Video Caption demo page
• track Example at HTML5 Demos

Элемент <track> стандартизует привязку дорожек с данными к медиафайлам. Это позволяет использовать динамическое содержимое, привязанное ко времени проигрывания медиафайла, что повышает ценность использования элементов audio и video, а также имеет неплохой потенциал для поисковой оптимизации.