track в HTML


Содержание
Илон Маск рекомендует:  Нейронные сети обучение без учителя

HTML тег

Элемент(от англ. «track» ‒ «трек, дорожка») используется в качестве дочернего элемента для и , определяя текстовые дорожки.

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

Синтаксис

Закрывающий тег

Атрибуты

kind HTML5 Определяет тип текстовой дорожки, если атрибут не указан, то по умолчанию используется значение subtitles . Возможные значения атрибута:
captions — дорожка, определяющая перевод диалога и звуковые эффекты. Используется в специальных версиях фильмах для глухих зрителей.
chapters — названия глав используемые для быстрой навигации по видео или аудио. Отображаются в виде списка.
descriptions — текстовое описание видео контента (подходит для слепых пользователей).
metadata — содержимое, используемое сценариями (эта информация не видна для пользователей).
subtitles — субтитры, обеспечивающие перевод содержимого, которое может быть не понятно зрителю. Например, их можно использовать в фильмах вместе с оригинальной дорожкой. Субтитры могут содержать дополнительную справочную информацию. Например текст в начале фильма или дату, время и место сцены. src HTML5 Путь к файлу с дорожкой. srclang HTML5

Указывает язык текста дорожки ( требуется, если kind = «subtitles» ).

label HTML5 Определяет название текстовой дорожки, используемое браузером при перечислении доступных текстовых дорожек. default HTML5 Наличие этого атрибута указывает, что данная дорожка предпочтительна и должна быть выбрана по умолчанию. Только одна дорожка может иметь атрибут default .

Для этого элемента доступны глобальные атрибуты и не доступны события.

HTML Tag

Sharing is caring!

Code Example

This video includes three text tracks. All four include subtitles in a different language. Available subtitle languages include German, English, and Japanese.

Why Provide Tracks?

Tracks ensure that all users have access to content presented in audio and video files regardless of their language or any physical limitations. They remove accessibility and languages barriers and ensure that users can fully understand the content presented in video or audio format. As such, tracks represent an important internationalization and accessibility feature.

Track Attributes

There are several attributes that can be applied to a track element to give the browser more information about the linked track.

  • The kind attribute can be used to identify the kind of data contained in the track: subtitles , captions , descriptions , chapters , or metadata .
  • The label attribute is a text label applied to the track and read by the user when the user is selecting between available tracks.
  • The src attribute specifies a URL where the track file, in .vtt format, is located. This is the only required track element attribute.
  • The srclang attribute identifies the language of the text data. If the kind is set to subtitles or if kind is ommitted ( subtitles is the default value of kind ), then the srclang is required.
  • The default attribute is used to identify the track that will be played by default unless the user selects and alternate track .

Элемент HTML5 track

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

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

Элемент track

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

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

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

Атрибуты элемента track

Атрибут src

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

Например:

Атрибут srclang

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

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

Атрибут kind

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

subtitles:

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

captions:

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

descriptions:

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

metadata

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

chapters

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


Атрибут label

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

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

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

Атрибут default

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

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

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

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

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

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

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

Поддержка браузерами элемента track

Элементимеет отличную поддержку браузеров:

Заключение

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

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

Реализация v >

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

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

Скринкаст: Видео обзор этой статьи

HTML5 video не поддерживается вашим браузером. Скачать видео

Скринкаст: видео обзор статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка на сайте Andew.ru

Скринкаст: Пример использования шаблонов

HTML5 video не поддерживается вашим браузером. Скачать видео

Скринкаст: примеры использования шаблонов из статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка — andew.ru

В HTML5 воспроизведение браузером аудио и видео файлов реализуется посредством тегов и , которые предоставляют управляемый сценариями объект. Использование этих тегов позволяет проиграть мультимедийный файл на web странице, управлять его воспроизведением путем задания атрибутов для тегов и , и дополнительных, вложенных в них тегов. В простейшем варианте использования достаточно вставить на web страницу нужный вам тег или и задать через их атрибуты несколько параметров. И это уже позволит проиграть мультимедиа файл на странице в HTML5 плеере. Также, поскольку элементы и являются объектами для JS, у них доступны свойства, методы и события, что предоставляет расширенные возможности полного управления HTML5 плеером через JavaScript . Однако, ввиду того, что браузеры могут иметь различия в реализации управления объектами аудио и видео посредством JS, то более лучшим выбором для этих целей будет использование специальных кроссбраузерных JS библиотек. Одна из таких библиотек под названием v > будет описана в отдельном посте. К тегам и , как и к другим тегам HTML применима стилизация посредством CSS. Детальную спецификацию для аудио и видео в HTML5 можно посмотреть на сайте World W > .

HTML5 видео и аудио развивающийся стандарт и он не связан ни с одним форматом аудио или видео, поэтому между браузерами существуют различия в поддерживаемых ими форматами аудио и видео файлов. Это различие сейчас компенсируют тем, что кодируют оригинальный файл несколькими разными кодеками и подключают все эти версии файлов к тегам или через вложенные теги . Однако среди поддерживаемых браузерами форматов аудио и видео файлов намечаются лидеры. Для видео это, конечно же, формат 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

Инструменты кодирования аудио и видео файлов

Пример стандартного использование HTML5 тега :

Пример HTML5 audio

HTML5 audio не поддерживается вашим браузером.

HTML5 код примера audio с микроразметкой schema.org:

Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона аудио.

Минимальная разметка аудио по schema.org должна включать itemprop= «name» , itemprop= «description» , itemprop= «contentUrl» . Остальные свойства не являются обязательными.

Пример стандартного использование HTML5 тега :

В демонстрации я применил для тега через атрибут class CSS стили, делающие ширину области видео динамической в зависимости от размера экрана. По высоте плеер подстроиться сам. Попробуйте изменить размер окна браузера для того, что бы увидеть как это работает. Поэтому в источнике кода этой демонстрации нет атрибутов width и height для тега , их заменяют CSS стили. Но в листинге кода шаблона этот примем не показан, т.к. является уже частностью.

Пример HTML5 v >

HTML5 video не поддерживается вашим браузером.


HTML5 код примера video с микроразметкой schema.org:

Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона видео.

Минимально необходимая для поисковиков разметка видео по schema.org должна включать все приведенные в коде примера свойства itemprop за исключением блока itemprop= «author» , который является не обязательным для поисковиков и его можно удалить, если нет данных для его заполнения. Для v >»thumbnail» в виде ImageObject, а Google требует указывать как itemprop= «thumbnailUrl» , поэтому приходиться вставлять v > , google валидатор . Основное преимущество от использования микроразметки заключается в удобстве такого контента для поисковых роботов и роботов социальных сетей. Эти роботы извлекают размеченные данные и агрегирую их. Поэтому использование микроразметки улучшает SEO сайта и способствует автоматическому распространению данных в социальных сетях. Детальное описание микроразметки Schema.org для видео размеченных схемой V > . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или YouTube, то вы можете под блоком кода виджета добавить свой блок кода HTML с описанием видео и в него встроить микроразметку Schema.org для этого видео. При этом, в качестве параметра URL — ссылки на видеоролик, указать не прямую ссылку на статический файл, а задать ссылку полученную от видео хостинга. Хотя в спецификации Schema.org и написано, что ссылка должна быть именно на прямой файл, но поисковики обрабатывают и ссылки на видео от видео хостинга (см. в примерах на сайте Яндекса в разделе Вебмастер), несмотря на то, что по такой ссылке нельзя скачать файл и нельзя просмотреть его напрямую в своем HTML5 медиа плеере на странице, только в виджете видео хостинга.

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Атрибуты и тегов:

Атрибуты src, preload, autoplay, mediagroup, loop, muted, controls являются общими атрибутами для всех медийных элементов, в том числе и для тегов и .

атрибут autoplay:

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

атрибут controls:

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

атрибут loop:

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

атрибут preload:

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

атрибут src:

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

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

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

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

  • атрибуты width и height применяются только к тегу и задают, соответственно, ширину и высоту области воспроизведения видеоплеера. В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только w >.

Атрибут muted:

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

Атрибут crossorigin:

  • атрибут crossorigin указывает браузеру на необходимость выполнение CORS запроса для данного элемента. По умолчанию атрибут отсутствует, что значит не использовать CORS запросы вообще. При наличии атрибута возможны следующие значения: anonymous и use-credentials. CORS (Cross-origin resource sharing ) — это технология современных браузеров, которая позволяет управлять разрешениями на загрузку ресурсов на текущей web странице с других доменов, отличных от домена текущей страницы. Поддержка браузерами стандарта CORS позволяет реализовать безопасный кроссдоменный обмен данными через выполнение специального запроса (заголовка) к домену текущей страницы на предмет того, разрешается ли загружать на этой странице ресурсы с другого указанного домена. Сервер на такой запрос должен указать домены, с которых разрешена загрузка ресурсов.

Атрибут mediagroup:


  • атрибут mediagroup позволяет объединить управление несколькими медиафайлами в один MediaController через создание группы медиафайлов в разных местах страницы. Это группа будет управляться одновременно для всех входящих в нее файлов. Это удобно, например, если нужно проиграть и управлять одновременно одним и тем же роликом в разных местах страницы с разными субтитрами, или разными роликами.

Теги и требуют наличие закрывающего тега.

Для тех случаев, когда браузер не поддерживает HTML5 и теги, что сейчас большая редкость, пред закрывающим контейнер тегом пишут текстовое сообщение и обычно добавляют ссылку на скачивание файла. Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла.

Путь к проигрываемому файлу также можно задать и при помощи тега с атрибутом src, размещенного внутри тегов или . Тег не имеет закрывающего тега.

В большинстве случаев тег выглядит так:

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

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

  • атрибут src=«URL» тега задает URL к мультимедийному файлу. Путь может быть как полным с указанием протокола и домена, так и относительно корня сайта.
  • атрибут type=»MIME-тип» тега или более полно type=’MIME-тип; codecs=»кодек»‘ указывает MIME-тип файла и кодек. Для аудио достаточно указать MIME-тип, например, для .mp3 — type=»audio/mpeg». Хотя по спецификации для видео в атрибуте type нужно указывать и кодек, но сейчас часто указывают только MIME-тип без кодека, предоставляя это на решение браузерам.
  • атрибут media=»all|braille|handheld|print|screen|speech|projection|tty|tv» тега указывает тип устройства, для которого должен воспроизводиться файл. Значение по умолчанию all, поэтому этот атрибут в большинстве случаев не указывают вообще, если не хотят конкретно определить устройство для воспроизведения.

Для HTML5 видео возможно также отображать в плеере дополнительную дорожку с информацией, такой как субтитры (subtitles), заголовки (captions), главы (chapters), описания (descriptions – не поддерживаются пока) и метаданные (metadata – не поддерживаются пока). Эта возможность реализуется путем добавления внутри тега тегов с соответствующими атрибутами.

Тег позволяет подключать к видео дополнительные файлы-дорожки специального формата WebVTT (Web V > ), в которых указаны выводимые текстовые сообщения с их временной привязкой к видео файлу. Стандарт WebVTT поддерживает не просто вывод текстовых сообщений, но и предоставляет варианты его CSS стилизации и опции по размещению в области просмотра видео. На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT, лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега для передачи через него URL картинок превью.

Файл формата WebVTT является обычным текстовым файлом с расширением .vtt в котором, в виде построчного списка, прописаны временные метки с временем старта и временем окончания и текстовые сообщения для вывода к этим меткам. К контейнеру можно подключить несколько файлов WebVTT с текстом на разных языках. Для каждого языка нужно создавать отдельный файл и подключать каждый через тег. Теги необходимо вставлять внутрь контейнера после всех тегов , но перед сообщениями об ошибках HTML5 видео. Тегс файлом субтитров на языке по умолчанию нужно размешать первым среди теговв текущем контейнере .

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

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

Атрибут kind тега задает тип дорожки и может принимать значения:

  • subtitles — субтитры в виде текста, который выводиться поверх видео. Для проигрываемого файла можно задать субтитры на разных языках для предоставления их выбора в плеере, если он его поддерживает. В большинстве случаев используется именно этот тип так он поддерживается большинством браузеров.
  • captions – заголовки в виде текста и звука, которые выводятся поверх видео. Похожи на субтитры, но, помимо текста, могут включать звуковые эффекты и другую аудио информацию.
  • chapters – главы, которые отображаются текстом в виде меню списка и предназначены для быстрой навигации по медиафайлу.
  • descriptions – описание, это текстовые файлы с описанием видео для воспроизведения их в screenreader.
  • metadata – метаданные для передачи js скриптам.

Атрибут src тега задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу файл имеет формат WebVTT и расширение .vtt.

Атрибут srclang тега задает язык дорожки через код языка. Для русского языка будет равен «ru», для английского «en».

Атрибут label тега задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название.

Атрибут default тега задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.

HTML 5Tag

Note that theelement was first introduced into HTML5 in late 2010 and therefore, browser support for this element may be limited for some time.

Example

This example demonstrates usage of thetag.

The above example uses a file called countdown_en.vtt to present subtitles.

Here are the contents of the countdown_en.vtt file:

The file simply specifies which text to display at which parts of the video. To add more subtitles, simply add more text and specify the appropriate points in the video that they should be displayed.

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to prov >style=»color:black;» .

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Attribute Description
kind Specifies the kind of text track. This attribute is an enumerated attribute.


The possible values for the «kind» attribute are:

Value Description
subtitles Transcription or translation of the dialogue. This can be useful for when the sound is in a different language to what the user can understand. Any subtitles are overlaid on the video. This is the default value.
captions Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. This can be useful for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf). Any captions are overlaid on the video; labeled as appropriate for the hard-of-hearing.
descriptions Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). Any descriptions are synthesized as audio.
chapters Chapter titles, intended to be used for navigating the media resource. Any chapters are displayed as an interactive list in the user agent/browser’s interface.
metadata Tracks intended for use from script. Not displayed by the user agent.
src Specifies the URL of the text track data. Required attribute.
srclang Specifies the language of the text track. The value must be a valid BCP 47 language tag. This attribute is required if the element’s kind attribute is «subtitles».
label Provides a user-readable title for the track.
default Specifies that the track is to be enabled if the user’s preferences do not indicate that another track would be more appropriate. There must not be more than one track element with the same parent node with the default attribute specified.

Global Attributes

The following attributes are standard across all HTML 5 tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

HTML track Tag — Text tracks element

HTMLtag specifies supplementary text such as subtitle, caption, or other forms of text that display on the media plays.

HTMLtag introduce in HTML5.

Example

Tag Attributes

HTMLtag support following specific attributes.

Attributes Value Description
default default Specifies the track should be enabled default. User’s can change track preferences later on.
kind captions
chapters
descriptions
metadata
subtitles
Specifies the kind of text in track.
label text Specifies the title of the track.
src URL Required. Specifies the URL resource of the track file.
srclang lang_code Specifies the language of the track text data. It must be a valid as per BCP-47 language tag.

Global Attributes

HTMLtag support following global attributes.

Attributes Value Description
id unique_name Declared unique id for an element.
class class_name Declared one or more classnames for an element.
style styles CSS inline styles specify an element.
title title Specify extra details of element contain, this will display as a «tooltip» for an elements.

Event Attributes

HTMLtag support following event attributes.

HTML5 Rocks

Переводы

Начало работы с элементом отслеживания HTML5

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

Отслеживание также можно использовать с другими типами хронометрированных метаданных. Исходные данные каждого элемента отслеживания представляют собой текстовый файл, составленный из ряда хронометрированных меток cue , которые могут содержать информацию в таких форматах, как JSON и CSV. Это очень функциональный инструмент, позволяющий создавать внешние ссылки и использовать навигацию через текстовый поиск в мультимедийных фрагментах, а также управлять моделью DOM и осуществлять другие действия, синхронизируемые с воспроизведением.

В настоящее время элемент отслеживания доступен для браузеров Internet Explorer 10 и Chrome 18+. Браузер Firefox пока не поддерживается. В браузере Chrome поддержку элемента отслеживания необходимо включить на странице chrome://flags.

Ниже приведен простой пример видео с элементом отслеживания. Чтобы просмотреть субтитры на английском языке, воспроизведите этот ролик.

Для просмотра этого демонстрационного видеоролика необходим браузер с поддержкой элемента отслеживания, например Google Chrome Canary. В браузере Chrome поддержку элемента отслеживания необходимо включить на странице chrome://flags.

Ниже показано, как выглядит код элемента видео с субтитрами на английском и немецком языках.

В этом примере в элементе видео можно выбрать язык субтитров. Следует упомянуть, что на момент написания статьи выбор языка субтитров еще не был реализован.

Обратите внимание на то, что элемент отслеживания невозможно использовать в URL типа file:// . Чтобы испытать функцию отслеживания в действии, разместите файлы на веб-сервере.

У каждого элемента отслеживания есть атрибут kind , который принимает значение subtitles , captions , descriptions , chapters или metadata . Атрибут элемента отслеживания src указывает на текстовый файл, содержащий данные о хронометрированных метках отслеживания в любом формате, который распознается браузером. Chrome поддерживает формат WebVTT, который имеет описанный ниже вид.

Каждый элемент файла отслеживания называется меткой. В метке указано время начала и окончания (значения разделены стрелкой), а ее текст располагается в следующей строке. Метки также могут иметь идентификаторы (в примерах выше – railroad и manuscript). Они разделены пустыми строками.

Время меток указывается в формате «часы:минуты:секунды:миллисекунды». Обратите внимание: анализ выполняется по строгим правилам. В случае необходимости числа дополняются нулями: часы, минуты и секунды должны состоять из двух цифр (00 для нулевого значения), а миллисекунды – из трех (000 для нулевого значения). На сайте quuz.org/webvtt можно воспользоваться средством проверки WebVTT-файлов, обнаруживающим ошибки в формате времени и другие проблемы, такие как непоследовательность временных меток.

Ниже приведен пример, показывающий, как выполняется поиск субтитров для навигации в видеофайле.

Использование HTML и JSON в метках

Если в файле WebVTT отсутствуют пустые строки, текст метки может охватывать несколько строк. Это значит, что в метках может использоваться формат HTML.


И это еще не все. В метках также можно использовать формат JSON.

Возможность использовать в метках структурированные данные повышает функциональность и гибкость элемента отслеживания. Веб-приложение может считывать события метки, извлекать текст каждой из них при ее активизации, анализировать данные и использовать результаты этого анализа для синхронизации изменений модели DOM (или выполнения других задач JavaScript и CSS) с мультимедийным воспроизведением.

Поиск и углубленная навигация

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

Tree Of Life – простой демонстрационный пример, в котором отслеживание метаданных используется для навигации путем поиска субтитров. Он также показывает, каким образом хронометрированные метаданные дают возможность управлять моделью DOM, синхронизированной с мультимедийным фрагментом.

Отслеживание и метки с JavaScript

У элементов аудио и видео есть свойство textTracks , возвращающее список TextTrackList , каждая позиция которого является объектом TextTrack , соответствующим элементу:

В свою очередь, у каждого значения TextTrack есть свойство cues , возвращающее список TextTrackCueList , каждая позиция которого представляет собой отдельную метку. К данным метки можно обращаться с помощью свойств, например startTime , endTime и text (последнее используется для извлечения текстового содержания метки), как показано ниже.

Иногда обращаться к объектам TextTrack удобнее с помощью элемента отслеживания HTMLTrackElement , как показано ниже.

Как демонстрирует этот пример, свойства TextTrack доступны через свойство элемента отслеживания track , а не через сам этот элемент.

Доступ к свойствам TextTrack возможен после (но не до) срабатывания события load .

Отслеживание и события метки

Существует два типа событий метки:

  • события входа и выхода, срабатывающие для меток;
  • события изменения меток, срабатывающие для объектов отслеживания.

В предыдущем примере детекторы событий метки были добавлены описанным ниже образом.

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

В приведенном ниже примере при изменении меток извлекается текущая метка и совершается попытка создать объект путем анализа ее текста.

Не только для видео

Не забывайте, что отслеживание можно применять как в видео-, так и в аудиоматериалах. Кроме того, для использования API элементов аудио, видео или отслеживания нет необходимости применять их в HTML-разметке. Документация по API текстового отслеживания содержит хороший пример упомянутого выше правила, демонстрируя удобный способ реализации «спрайтов» аудио.

Метод addTextTrack принимает три параметра: kind (например, «метаданные», как показано выше), label (например, Sous-titres français) и language (например, fr).

В примере выше также используется команда addCue , извлекающая объект TextTrackCue , конструктор которого принимает аргументы id (например, «лай собаки»), startTime , endTime , text (текст метки), аргумент параметров метки webVTT (для определения расположения, размера и выравнивания), а также логическую пометку pauseOnExit (например, для паузы в воспроизведении после заданного в учебном видео вопроса).

Обратите внимание на то, что свойства startTime и endTime используют плавающие значения точек в секундах, а не в формате «часы:минуты:секунды:миллисекунды», применяемом в WebVTT.

Кроме того, метку можно удалить с помощью команды removeCue() , которая принимает ее в качестве аргумента, как показано в примере ниже.

Выполняя эту команду, можно заметить, что представленная метка удаляется после вызова кода.

У элементов отслеживания есть атрибут mode , принимающий значения 0 ( TextTrack.OFF в спецификациях, TextTrack.DISABLED в браузере Chrome), 1 ( TextTrack.HIDDEN ) и 2 ( TextTrack.SHOWING ). Это удобно, если необходимо использовать события отслеживания при выключенной обработке по умолчанию. В приведенном ниже видео показан пример использования атрибута (видео создано Эриком Бидельманом (Eric Bidelman)).

В этом примере используется метод getCueAsHTML() , возвращающий HTML-версию каждой метки путем преобразования файла из формата WebVTT в объект DocumentFragment HTML на основе анализа текста метки WebVTT и правил создания модели DOM. С помощью свойства метки text можно извлечь значение ее необработанного текста в том виде, в котором он содержится в файле src .

В этом случае удобно использовать метод getCueAsHTML() , возвращающий HTML-версию каждой метки путем преобразования файла из формата WebVTT в объект DocumentFragment HTML на основе анализа текста метки WebVTT и правил создания модели DOM. С помощью свойства метки text можно извлечь значение ее необработанного текста в том виде, в котором он содержится в файле src .

Подробнее о разметке

Разметку можно добавлять в строку метки времени, чтобы указать направление, выравнивание и расположение текста. Текст метки также можно разметить для указания докладчиков (например, имен выступающих) и добавления форматирования. Субтитрами и титрами можно управлять с помощью CSS, как показано ниже.

На слайдах Сильвии Пфейффер (Silvia Pfeiffer), демонстрирующих доступность видео в HTML5, приведены и другие примеры работы с разметкой, а также показан процесс создания глав отслеживания для навигации и описаний отслеживания для экранных дикторов.

И наконец…

Хранение данных меток в текстовых файлах (вместо их внутриполосного кодирования в аудио- или видеофайлах) упрощает создание субтитров и титров, повышает доступность и переносимость данных, а также расширяет возможности поиска.

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

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

в HTML

Вы можете создавать настраиваемые элементы отображения субтитров для своих веб-страниц, содержащих видео, и управлять элементом track, его методами и свойствами в сценариях.

Введение

Использование элемента track исключительно в HTML обеспечивает базовую реализацию текста титров, однако API track может добавить вашим веб-страницам гибкости. Для решения на HTML требуется использовать атрибут controls с элементом video. Если ваше приложение имеет настраиваемый пользовательский интерфейс для управления воспроизведением, как описано в разделе Использование JavaScript для управления проигрывателем видео в формате HTML5, встроенные элементы управления видео, вероятнее всего, будут отключены. Любые возможные действия, производимые с помощью встроенных элементов управления, включая выбор и отображение текста титров, также можно выполнять, используя сценарий. В этой статье приводится методика доступа к тексту субтитров и титров, отображения текста в виде стилизованных блоков, выбора дорожек, а также использования особых дорожек для создания на веб-странице слайд-шоу, сопровождающего ваши видеозаписи.

Получение и использование объектов track в JavaScript

API элемента track поддерживает несколько объектов, что обеспечивает доступ к элементам track и соответствующему содержимому. Здесь вы можете увидеть основные объекты, отслеживающие текст, с помощью которых можно возвращать содержимое из элементов track и видео.

как элемент, var oV >

Объект Метод или свойство для получения объекта Предназначение объекта
Video Получение списков дорожек и управления воспроизведением.
track как элемент, oTrack = document.getElementById(trackElementId); как объект. Элемент и объект track. Получение и установки свойств типа kind, src или label для конкретных дорожек.
TextTrackList oTrackList = document.getElementById(VideoELementId).textTracks; Представляет список всех TextTracks, связанных с объектом Video. Свойство length используется для отображения количества дорожек в списке.
TextTrack oTextTrack = document.getElementBy >

Получение очередей и значений времени. Возвращается свойством track объекта track; также можно выбрать из TextTrackList.
TextTrackCueList oCuesList = oTextTrack.cues; Это список объектов TextTrackCue, содержащих отдельные субтитры для дорожки.
TextTrackCue var oFirstCue = oCueList[0]; Объект TextTrackCue (очередь) предоставляет вам доступ к времени начала и окончания, а также к тексту сегмента субтитров.

Получение очереди


Чтобы получить содержимое TextTrackCue дорожки, вы можете начать либо с элемента track, либо с video. Повсеместное использование имен track и TextTrack может вызвать некоторую путаницу. В HTML элемент track (дочерний объект элемента video) определяет файл, содержащий значения времени и текст титров. Элемент track содержит язык, тип файла и другие атрибуты. Объект track представляет элемент трека в JavaScript и может использоваться для получения и установки атрибутов в формате HTML и для получения свойства track. Свойство track возвращает объект TextTrack. Объект TextTrack представляет содержимое и возвращает TextTrackCueList, который состоит из серии объектов TextTrackCue. Объекты TextTrackCue содержат свойства startTime, endTime и text.

Надеемся, следующий пример позволит прояснить все спорные моменты. В нем определяются элементы video, source и track в HTML. Эти кнопки вызывают функции JavaScript, возвращающие текст очереди, время начала и время окончания при помощи элемента video или элемента track.

В этом примере при нажатии Get a cue from video element (Получить очередь из элемента video) вызывается функция «cuesFromVideoElement()». Эта функция сначала получает объект video, а затем возвращает список дорожек из объекта video при помощи свойства textTracks. Несмотря на то что возвращаются три дорожки, используется только первая. Затем первая дорожка (oTextTrack) передается функции «getCues()».

Функция «getCues()» использует свойство cues, чтобы вернуть объект TextTrackCueList. Затем эта функция получает первый объект TextTrackCue из объекта TextTrackCueList. Объект TextTrackCue предоставляет свойства text, startTime и endTime, которые затем передаются функции «show()». Функция «show()» отображает содержимое в элементе div на веб-странице.

При нажатии Get a cue from track element (Получить очередь из элемента track) вызывается функция «cuesFromTrackElement()», использующая свойство id элемента track (с именем myTrack) для получения объекта track. Свойство track возвращает объект TextTrack из объекта track. На этом этапе объект TextTrack идентичен объекту, возвращенному в функции «cuesFromVideoElement()», а функция «getCues()» вызывается, чтобы получить и отобразить содержимое.

Предыдущий пример относится только к первой очереди элемента track. В следующем примере циклически проходятся все очереди и отображается текст титров в элементе div с возможностью прокрутки.

В этих примерах свойство text используется для получения части текста из очереди. Также можно получать текстовое содержимое из очереди при помощи метода getCueAsHTML. Этот метод возвращает текст как фрагмент документа. Этот фрагмент можно добавлять к своей веб-странице при помощи методов appendChild или replaceChild.

Использование событий для получения очередей синхронизированного текста

При воспроизведении видео событие cuechange сопровождает каждый новый временной сегмент в файле отслеживания синхронизированного текста. Благодаря этому приложение знает, когда отображается новый текст титров в проигрывателе видео, и может самостоятельно обрабатывать этот текст. Свойство activeCues позволяет приложению получать очередь, сопровождающую текущий временной сегмент видео. Временные сегменты текстовой дорожки могут перекрываться, что позволяет иметь несколько текстов титров для одного и того же момента времени в видео. Свойство activeCues возвращает объект TextTrackCueList, представляющий одну или несколько очередей, сопровождающих временной сегмент при чтении activeCues. Свойство length возвращает количество очередей, содержащихся в списке очередей активной дорожки.

В следующем примере создается обработчик события cuechange, использующий свойство activeCues для получения текущего текста титров и его отображения в элементе div. При возникновении события cuechange этот обработчик проверяет свойство length, чтобы определить наличие доступных очередей. При наличии одной или нескольких очередей отображается первая очередь в списке activeCues. В этом примере предполагается, что для каждого момента времени создается один текст титров, поэтому подготавливается к работе только одна активная очередь. Вы можете использовать значение свойства length в цикле for в своем приложении, если хотите получить несколько очередей и соответствующим образом обрабатывать их.

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

Текст титров со стилем CSS перекрывает проигрыватель видео.

Прослушиватели событий для элементов video и track создаются в обработчике DOMContentLoaded. Это обеспечивает загрузку всех элементов страницы (включая video и track) до попытки доступа к ним. Если приложение пытается использовать события до загрузки этих элементов, Internet Explorer 10 выдает исключение.

Элемент div, отображающий текст титров, должен иметь ту же ширину, что и элемент отображения видео. Событие onloadedmetadata отправляет уведомление, если размеры элемента video известны. Это позволяет приложению настроить ширину и расположение div области текста титров. Если элемент video можно загружать, а приложение пытается получить videoWidth и videoHeight до загрузки содержимого, событие возвращает значения по умолчанию либо нулевые значения. Атрибут style используется для настройки ширины, смещений текста относительно левого и верхнего краев, а также других элементов. Сначала вычисляются пиксели, а затем результат преобразуется в строку с помощью присоединения текста px (пиксели), чтобы он правильно работал с объектом style.

Аналогично предыдущему примеру, событие oncuechange выводит текст титров, отображаемый при воспроизведении видео. Однако, в отличие от предыдущего примера, для kind дорожки устанавливается значение metadata, чтобы подавить отображение текста титров в проигрывателе видео. Файл дорожки не изменяется. Если вы хотите также отображать встроенные заголовки, измените тип атрибута kind на kind=»subtitles.»

Изменение дорожек в сценарии

Пример, приведенный в разделе Начало работы с элементом track, показывает использование нескольких элементов track для выбора языка субтитров. Выбирать другие субтитры пользователь может в меню выбора текста титров (встроенный элемент управления). Чтобы выбирать дорожку таким способом, в элементе video должен быть атрибут controls.

Если атрибут controls не используется, вы можете изменять дорожки программно с помощью свойства mode. Свойство mode может иметь три состояния, определенные как константы в объекте дорожки: SHOWING, HIDDEN и OFF. Следующий пример иллюстрирует использование режимов для переключения между тремя языковыми дорожками.

При загрузке страницы при помощи свойства textTracks выполняется получение списка текстовых дорожек, связанных с элементом video. Приложение использует createElement в цикле for, чтобы создать элемент div для метки каждой дорожки. Каждый элемент div имеет событие onclick, указывающее на функцию «changeTrack()». Чтобы упростить код, для атрибута Id каждого div указывается текущее значение i в цикле for. Значение i также включается в код события onclick и передается как параметр. Цикл for для функции «changeTrack()» сравнивает принимаемый параметр индекса (i) и при совпадении устанавливает для атрибута mode дорожки значение SHOWING, чтобы показать, что она активна. Угловые скобки (>пример

Создание на веб-странице слайд-шоу для сопровождения видео

Элемент track можно использовать не только для отображения переводов или комментариев. С помощью атрибута kind=»metadata» элемента track вы можете указать, что определенная дорожка активна (синхронизирована с видео), но не отображается в проигрывателе. В предыдущем примере использовалось характерное поведение kind=»metadata» для отключения встроенного отображения текста, что позволяло отображать этот текст отдельно. Однако диапазон применения дорожки метаданных гораздо шире.

В следующем примере с видео связаны две дорожки: одна содержит текст титров, а вторая является списком URL-адресов. При воспроизведении видео дорожка текста титров отображается в проигрывателе, а URL-адреса отображаются в IFrameElement, чтобы создать слайд-шоу. URL-адрес также выводится под проигрывателем видео в виде интерактивной ссылки, открывающейся в отдельной вкладке или окне при помощи атрибута target=»_blank» тега anchor.

Форматом файла метаданных является стандартный файл WebVTT (см. раздел Создание файлов в форматах WebVTT и TTML с помощью средства создания титров), но вместо текста титров используются URL-адреса. В этом примере показаны первые несколько строк из файла примера («control1.vtt»):

Файл «control1.vtt» создан копированием и вставкой URL-адресов в поле текста средства создания титров для сегментов видео с соответствующим содержимым.

В этом примере используется событие oncuechange, подключенное к дорожке метаданных ( ), а свойство activeCues получает текст текущей очереди, содержащий URL-адрес. Чтобы отображать веб-страницу, для атрибута src в iframe указывается URL-адрес, содержащийся в тексте текущей очереди. Этот URL-адрес также используется для создания ссылки привязки, используемой в качестве innerHTML элемента span. Она отображается как интерактивная ссылка.

Для свойства mode устанавливается значение SHOWING, чтобы дорожка метаданных была активной. Тем не менее, пока для режима установлено значение SHOWING, дорожка метаданных никогда не будет отображаться.

С помощью дорожки метаданных также можно предоставлять дополнительные сведения о дорожке текста титров, например добавлять информацию о дикторе или примечания о говорящем. Пример такого использования дорожки метаданных см. в демонстрации сопровождения титрами видео для Internet Explorer 10.

Размещение файлов дорожек и дальнейшая работа

Как упоминалось в разделе Создание файлов в форматах WebVTT и TTML с помощью средства создания титров, следует указать правильный тип MIME на сервере, используемом для размещения файлов дорожек.

Обслуживаемые файлы дорожек Параметр расширения Параметр типа MIME
TTML .ttml application/ttml+xml
WebVTT .vtt text/vtt

Чтобы проверить рабочие файлы, вы можете заменить расширение «TXT» в файлах WebVTT на «VTT». При этом они продолжают работать. В любом случае необходимо обеспечить правильный внутренний формат согласно методике, описанной в разделе Создание файлов в форматах WebVTT и TTML с помощью средства создания титров. Однако эти форматы считаются неподдерживаемыми для Windows Internet Explorer, поэтому выполняйте такую попытку только в тестовой среде. При этом работа может на некоторое время прерваться.

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

Добавление синхронизированного текста транскрипции к видео на HTML5

Современный web уже достаточно сложно представить без видео, однако часто напрямую восприятие речи в подобном представлении может быть затруднено, например, в случае пользователей с проблемами слуха, людей, неуверенно воспринимающих живую речь на слух и пр. В подобной ситуации обеспечить доступность контента поможет HTML5, предоставляющий функционал добавления к медиа файлам субтитров с транскрипцией, то есть с текстовой записью речи.

Транскрипция задаётся документом в формате VTT, который добавляется к исходному видео в теге.

VTT-файл является специально форматированным документом. Он содержит нумерованную очередь, время начала/конца, а также сам текст. Рекомендуется в текст транскрипции включать не просто запись речи, но и имя произносящего. Сам текст в VTT может быть форматирован несколькими базовыми тегами, такими как или .
Начинается документ с объявления WEBVTT:

Кроме файла VTT, можно также использовать TTML (Time Text Markup Language), который является обычным XML, к тому же поддерживающимся Flash и некоторыми другими распространёнными технологиями. Так что при миграции с Flash на HTML5 это может оказаться оптимальным вариантом, потому что можно будет использовать уже имеющийся документ с транскрипцией.

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

Транскрибирование видео может быть отдано на аутсорсинг, особенно если речь идёт об обработке большого объёма материалов, например, это может быть актуально для правительственных сайтов, к которым предъявляются требования по обеспечению доступности всего контента для пользователей с любыми ограничениями, в том числе и голосовых записей для глухих посетителей ресурса.

Урок 14. Как вставить аудио или музыку на сайт в html

Как вставить аудио (музыку) на сайт в html

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

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

2. Далее нужно скачать файлы плеера .

3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:

И всё готово! Можете посмотреть и работу примера.

Как установить фоновую музыку в html

Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.

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

Синтаксис довольно-таки прост:

Закрывающий тег не требуется.

Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:

Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)
autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз

Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true.

Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:

В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :

src — путь к Вашему аудиофайлу
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.

Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.

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

Вставка аудио и музыки в HTML5 — тег audio

audio — парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.

Для каждого браузера проигрыватель и панель управления может отличаться.
Для некоторых браузеров, например FF, нужно загружать ogg-файл, для остальных mp3.

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

autoplay— файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls — отобразить панель управления плеера в браузере
loop — проигрывает файл заново после его окончания
preload — загрузка аудио файла произойдёт вместе с загрузкой страницы
src — путь к аудио файлу (mp3 или ogg)

Пример кода с тегом audio

Теперь смотрим работу тега audio в Вашем браузере:

Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL