HTML5 <track>

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

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

Элемент track

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

Обычно в элемент <track> добавляют субтитры, титры, описания, главы или метаданные для SEO. Например технология WebVTT предназначена для добавления субтитров к видео HTML5.

Теперь, когда Вы поняли зачем нужен элемент <track>, изучим наиболее важные атрибуты, которые можно использовать с элементом <track>. Полный пример, обобщающий использование элемента <track> с атрибутами и видео показан ниже:

<video src="sample.ogv">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <track kind="captions" src="captions.srt" srclang="ru">
    <track kind="descriptions" src="desciptions.srt" srclang="ru">
    <track kind="chapters" src="chapters.srt" srclang="ru">
    <track kind="subtitles" src="subtitles_ru.srt" srclang="ru" default>
    <track kind="subtitles" src="subtitles_ua.srt" srclang="ua">
    <track kind="metadata" src="metadata1.srt" srclang="ru" label="Описание 1">
    <track kind="metadata" src="metadata2.srt" srclang="ru" label="Описание 2">
</video>

Дальше рассмотрим все атрибуты элемента <track> в деталях.

к меню ↑

Атрибуты тега track

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

Пример:

<video width="1024" height="768" controls>
 <source src="video.mp4" type="video/mp4">
 <source src="video.ogg" type="video/ogg">
 <track src="subtitles.srt"
  kind="subtitles"
  srclang="ru"
  label="Русские субтитры">
</video>
к меню ↑

Атрибут src

Атрибут src — это обязательный атрибут в нем указывается исходный адрес текстового файла содержащий данные. Значением может быть абсолютный или относительный URL-адрес.

Пример:

<track src="captions.srt">
к меню ↑

Атрибут srclang

Атрибут srclang определяет язык текстовых данных. Этот атрибут должен быть включен, если атрибут kind установлен в значение subtitles (подробнее о subtitles читайте дальше). Значение атрибута srclang должен соответствовать тегу языка BCP 47. Например если значение ua Украинский, а ru используется для Русского языка.

Этот пример кода задает текст для файла трека на русском языке:

<track src="subtitles.srt" kind="subtitles" srclang="ru">
к меню ↑

Атрибут kind

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

к меню ↑

subtitles:

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

Пример:

<track src="subtitles.srt" kind="subtitles" srclang="ru">
к меню ↑

captions:

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

Простой пример:

<track src="captions.srt" kind="captions">
к меню ↑

descriptions:

Из названия понятно что descriptions используются для описания медиа контента. Описание так же можно применить для слепых пользователей или когда видео не доступно или просто черный экран. Треки, помеченные как описание, как правило, синтезируются как отдельный аудио-трек.

Пример:

<track src="descriptions.srt" kind="descriptions">
к меню ↑

metadata

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

Пример:

<track src="metadata.srt" kind="metadata">
к меню ↑

chapters

Представляет собой название отрезка медиа файла если он разделён на главы, предназначен для навигации по разделам медиа файлов. Треки которые обозначены как главы, отображается в обозревателе пользователя интерактивным списком. Читайте как добавить закладки к видео HTML5.

<track src="chapters.srt" kind="chapters">
к меню ↑

Атрибут label

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

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

В этом примере мы видим, что атрибут label имеет значение Русские субтитры.

<track src="subtitles.srt"
  kind="subtitles"
  srclang="ru"
  label="Русские субтитры">
к меню ↑

Атрибут default

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

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

<track kind="subtitles" src="subtitles_en.srt" srclang="en" default>
<track kind="subtitles" src="subtitles_ru.srt" srclang="ru">
<track kind="subtitles" src="subtitles_ua.srt" srclang="ua">
к меню ↑

Важность элемента track для SEO

Элемент <track> имеет полную оптимизацию для video Search Engine Optimization (SEO) чтобы ваши медиа файлы лучше воспринимались поисковыми системами.

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

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

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

Поддержка

  • Хром
  • Firefox 31+
  • IE10+
  • Safari 6+
  • Opera 15+
к меню ↑

Заключение

Поисковые системы не смотрят Ваше видео и не слушают аудио файлы, лучший способ сообщить поисковикам о чем Ваш медиа файл это заполнить значения в элементе <track>.

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