В наши дни видео и аудио являются обычным делом в Интернете. Интернет больше не просто текстовый. Видео вносит почти в 40% результатов поиска . С точки зрения пользователя, мультимедиа — это интерактивный и забавный сеанс. С другой стороны, для разработчика расширение опыта было трудной задачей, пока элемент HTML5 <track> пришел на помощь.
Прочитав эту статью, вы поймете, как добавлять синхронизированные медиа-треки, такие как субтитры, в ваши медиа-файлы. Кроме того, вы узнаете, как они увеличивают ценность SEO веб-страницы. Прежде чем двигаться дальше, вы можете ознакомиться с HTML-видео и аудио , объясняя форматы контейнеров, кодеки, разметку и основы.
Элемент <track>
Элемент <track> определяет любой текст, который вы хотите отобразить вместе с воспроизводимым медиафайлом. Текст может включать subtitles , captions , descriptions , chapters или metadata .
Другими словами, элемент <track> позволяет указать дополнительные синхронизированные по времени текстовые ресурсы, которые соответствуют временной шкале аудиофайлов аудиоэлемента или временной шкале видеофайлов видеоэлемента.
Элемент track является пустым элементом, т. Е. Он не должен иметь закрывающего тега (т.е. это элемент void). Он должен содержаться внутри тегов <video> или <audio> . Кроме того, если внутри тегов video или audio есть какой-либо элемент <source> элемент <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
Этот атрибут указывает адрес источника для текстового файла, который содержит данные дорожки, и, естественно, является обязательным атрибутом. Значение должно быть абсолютным или относительным URL. Это означает, что файлы должны быть размещены на веб-сервере; элемент track нельзя использовать из файла: // URL.
Например:
<track src="video_captions.srt">
Атрибут srclang
srclang определяет язык отслеживаемых во времени данных. Этот атрибут должен быть включен, если для атрибута kind установлено значение subtitles (подробнее об этом ниже). Значение атрибута srclang должно быть допустимым языковым тегом BCP 47 . Например, значение hi представляет хинди, а en используется для английского языка . Доступно около 8000 языковых подтэгов .
<track src="video_subtitles.srt" kind="subtitles" srclang="en">
Приведенный выше пример кода задает язык текстового файла с временной синхронизацией как английский.
kind атрибут
Этот атрибут определяет тип трека, который мы хотим добавить. Он может содержать одно из нескольких значений, каждое из которых объяснено ниже.
субтитры
Обычно это перевод диалога, который воспроизводится в видео или аудио файле. Они пригодятся, когда пользователь не может понять язык, на котором воспроизводится звуковая дорожка, но когда пользователь может читать диалоги, написанные на предпочтительном языке. Указание языка источника обязательно. Это делается путем добавления соответствующего значения в атрибут srclang :
<track src="video_subtitles.srt" kind="subtitles" srclang="en">
подписи :
Подпись — это краткое описание, сопровождающее воспроизводимое видео. Это уместно в случае, когда мы хотим информировать пользователя о какой-либо важной информации или даже когда звук не чистый или не слышен. Простой пример
<track src="video_captions.srt" kind="captions">
описания :
Как следует из названия, они используются для описания медиа-контента. Это подходит, когда пользователь слеп, или видео недоступно или скрыто. Временные дорожки, помеченные как описания, обычно синтезируются как отдельная звуковая дорожка. Например:
<track src="video_descriptions.srt" kind="descriptions">
метаданные
Это предназначено для временных треков, которые предлагают контент метаданных. Обычно он не отображается агентом пользователя. Значение метаданных предназначено для использования скриптом, подобным JavaScript. Вот пример:
<track src="video_metadata.srt" kind="metadata">
главы
Это представляет заголовок главы, предназначенный для использования, когда пользователь перемещается по медиа-ресурсу. Дорожки, помеченные как главы, обычно отображаются в интерактивном списке в интерфейсе пользовательского агента.
<track src="video_chapters.srt" kind="chapters">
Атрибут label
Этот атрибут используется для определения заголовка текстовой дорожки, включенной в видео / аудио файл. Он используется браузером при перечислении доступных текстовых дорожек и является удобочитаемой меткой текстовой дорожки.
Если вы добавите атрибут label к элементу <track> , значение атрибута label не может быть пустым значением, иначе код не будет проверен. Значение должно быть строкой. Если этот атрибут отсутствует, браузер назначит значение по умолчанию, например, «без названия».
<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) и позволил более экономичным способом улучшить понимание ваших видеофайлов поисковыми системами.
Поисковые системы становятся все более осведомленными о мультимедиа, и чем больше информации вы можете прикрепить к своим файлам, тем лучше ориентируетесь и увеличиваете трафик, который превратится в доход для вас.
Некоторые из ключевых преимуществ SEO:
- Улучшает ваше присутствие в поиске : поисковые системы сканируют любой текстовый контент, связанный с видео, во время поиска.
- Глубокая связь : поисковые системы возвращают результаты поиска, которые указывают на определенную часть видео, связанную с временными кодами.
- Связанный контент : текстовые файлы могут быть легко включены в связанный текстовый контент на той же странице.
- Доступность и UX : субтитры и подписи улучшают удобство использования и доступность для людей с ограниченными возможностями.
- Миниатюра в результатах поиска : видео-страница имеет то преимущество, что она отображается в виде расширенного фрагмента с миниатюрой в результатах поиска, что может повысить рейтинг кликов.
Более подробную информацию о SEO преимуществах транскриптов и подписей к видео можно найти в этой статье .
Поддержка браузера для <track>
Учитывая все это, элемент <track> имеет отличную поддержку браузера :
- Хром
- Firefox 31+
- IE10 +
- Safari 6+
- Опера 15+
Демоверсии и Заключение
Чтобы увидеть элемент <track> в действии, есть две ссылки:
Элемент <track> стандартизирует добавление данных трека в медиафайлы. Это позволяет использовать динамический контент, связанный с воспроизведением мультимедиа, что, в свою очередь, повышает ценность аудио и видео элементов и дает потенциальные преимущества для SEO.