Количество просмотров:
0В настоящее время аудио- и видеофайлы являются обычным явлением в сети. Интернет более не основывается только на текстовых файлах. Видео повышает результативность поиска на 40%. Если рассматривать со стороны пользователя, мультимедийные файлы повышают уровень взаимодействия, а также несут развлекательную функцию. С другой стороны, для разработчика сайта разместить такие файлы было трудноразрешимой задачей до тех пор, пока не появился элемент HTML5 track.
Внимательно изучив эту статью, вы получите представление об алгоритме добавления синхронизированных дорожек, таких как, например, субтитры, к вашим медиа-файлам. Также вы сможете узнать, как это может повысить SEO-ценность данной страницы сайта. Прежде чем идти дальше, вероятно, вы захотите ознакомиться с вводной темой по HTML видео и аудио, которая объясняет, что такое контейнерный формат, кодеки, разметка и другие основные термины.
Элемент <track>
Элемент <track> обозначает любой текст, который вы хотите показать одновременно с проигрываемым медиафайлом. Этот текст может содержать субтитры, подписи, разделы или метаданные.
Иначе говоря, элемент <track> позволяет вам указать дополнительные синхронизированные по времени текстовые файлы, которые совмещаются со шкалой воспроизведения аудио или видео.
Элемент <track> является пустым элементом, т.е. после него не нужно ставить закрывающий тег (это значит, что он является пустым элементом). Этот элемент должен быть внутри тегов <audio> и <video>. Также, в случае наличия любого элемента <source> внутри <audio> или <video> тега, элемент <track> должен идти после элемента <source>.
Пример:
<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
Данный атрибут определяет адрес источника для текстового файла, который содержит данные о дорожке и поэтому, разумеется, является обязательным атрибутом. Путь к файлам должен быть абсолютным или относительным. Это значит, что файлы необходимо загрузить на интернет-сервер; нельзя использовать <track> элемент с такими адресами, как файл://URL.
Например:
<track src="video_captions.srt">
Атрибут scrlang
Scrlang определяет язык данных, которые синхронизируются по времени. Данный атрибут нужно обязательно включить, если значение субтитров установлено в атрибуте kind (подробнее об этом вы узнаете ниже). Значением атрибута scrlang должен быть действительный языковой тег BCP 47. Например, значение hi используется для хинди, а en означает английский язык. В настоящее время доступно более .
<track src="video_subtitles.srt" kind="subtitles" srclang="en">
Вышеуказанный пример кода указывает, что языком синхронизированного текста является английский. Атрибут kind
Атрибут kind
Данный атрибут определяет вид дорожки, которую мы собираемся добавить. Он может включать одно из нескольких значений, по каждому из которых будет дано объяснение далее.
Subtitles
Обычно это перевод речи, которая звучит в видео- или аудиофайле. Они пригождаются в том случае, если юзер не понимает язык оригинальной аудиодорожки, но может читать текст диалогов на выбранном языке. Указание на конкретный язык источника является обязательным. Это осуществляется путем добавления к атрибуту scrlang соответствующего значения:
<track src="video_subtitles.srt" kind="subtitles" srclang="en">
Captions
Подпись (caption) – это краткое описание, которое отображается на экране в процессе воспроизведения видео. Данное значение можно использовать для передачи пользователю соответствующей информации или в том случае, если звук неясный или его вообще не слышно. Ниже простой пример:
<track src="video_captions.srt" kind="captions">
Descriptions
Как уже ясно из названия, эти значения используются для того, чтобы описать содержание медиафайла. Целесообразно использовать это значение при просмотре видео слепыми людьми и в том случае, если изображение недоступно или затемнено. Синхронизированные треки, которые обозначаются как описания, обычно указываются как отдельная аудиодорожка. Например:
<track src="video_descriptions.srt" kind="descriptions">
Metadata
Это значение предназначено для синхронизированных треков, которые содержат данные о данных. Обычно они не видны в браузере пользователя. Метаданные используются скриптами, такими как Java Script. Например:
<track src="video_metadata.srt" kind="metadata">
Сhapters
Этот тип значение представляет собой заголовок, который используется в том случае, если пользователю нужно ориентироваться по медиа-ресурсу. Треки, обозначенные как разделы, обычно отображаются в интерфейсе браузера в форме интерактивного списка.
<track src="video_chapters.srt" kind="chapters">
Атрибут label
Данный атрибут используется для обозначения заголовка текстового трека, присоединенного к видео/аудиофайлу. Он используется браузером во время составления списка доступных текстовых треков и предстает в виде удобного для пользователя заголовка текстового трека.
Если вы добавляете атрибут label к элементу <track>, значение атрибута label не может быть пустым, в этом случае код не будет действительным. Значение должно иметь строковую последовательность. В том случае, если конкретное значение этого атрибута не определено, браузер присвоит ему значение по умолчанию, подобно “untitled”.
<track src="video_subtitles.srt"
kind="subtitles"
srclang="en"
label="English_subtitles">
В вышеуказанном примере мы можем видеть, что содержание атрибута label составляет значение “English subtitles”.
Атрибут default
Это логическое значение, которое используется для обозначения определенной дорожки как дорожки по умолчанию. Естественно, что атрибут 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>, мы можем рассмотреть общий пример, который показывает, как использовать элемент <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="Metadata 1"> <track kind="metadata" src="video_metadata2.srt" srclang="en" label="Metadata 2"> </video>
Чем могут быть полезны медиа треки для SEO
Элемент <track> полностью открыл путь для поисковой оптимизации под видео и предложил более действенный способ сделать ваши видеофайлы более понятными для поисковых машин.
Поисковые машины все больше понимают мультимедийные файлы, и чем больше информации вы можете прикрепить к вашим файлам, тем более целевой и высокий трафик вы получите, который в результате обернется более высокими доходами.
Здесь перечислены некоторые из ключевых преимуществ для SEO:
- Улучшает позиции сайта в поисковой выдаче: В процессе поиска поисковые машины просматривают любой текст, связанный с видео.
- Глубокие связи: Поисковые машины возвращают результаты поиска, которые указывают на определенную часть видео, связанную с временными кодами.
- Связанный контент: текстовые файлы можно легко внедрить в связанный текстовый контент на той же странице.
- Доступность и восприятие пользователем: Субтитры и подписи повышают практичность и доступность для людей с ограниченными возможностями.
- Эскиз в результатах поиска: Одним из плюсов является то, что в результатах поиска страница с видео может отображаться как фрагмент с эскизом видео, что может увеличить процент перехода по ссылке.
Более подробную информацию о пользе транскриптов видео и подписей вы можете найти в другой статье.
Поддержка элемента <track> браузерами
Все вышеуказанные значения элемента <track> прекрасно поддерживаются следующими браузерами:
- Chrome
- Firefox 31+
- IE10+
- Safari 6+
- Opera 15+
Демо-видео и выводы
Чтобы посмотреть, как действует элемент <track>, пройдите по двум ссылкам:
Элемент <track> стандартизирует процесс соединения дорожек с данными с медифайлами. Он делает возможным использование динамичного содержимого, связанного с процессом воспроизведения медиа, что, в свой черед, повышает значимость аудио- и видео-элементов и в будущем может принести пользу поисковой оптимизации.
Источник урока: