Материалы для WEB разработки на LAMP
JS Tracks свойства медиа элемента video и audio

К Tracks свойствам JS медиа объекта аудио и видео относятся три свойства - это audioTracks, videoTracks, textTracks. Все эти свойства доступны только для чтения и возвращают соответствующий TrackList JS объект из которого можно получить нужный Track. Наибольшая поддержка и реализация в браузерах доступна для свойств и методов текстовых треков.

 

.audioTracks

//AudioTrackList object, только для чтения
media.audioTracks

 

.videoTracks

//VideoTrackList object, только для чтения
media.videoTracks

Свойства audioTracks и videoTracks  возвращают AudioTrackList  и VideoTrackList  объект соответственно, который содержит имеющиеся для медиа элемента video и audio треки (медиа файлы). Медиа объект видео или аудио может содержать несколько вложенных при помощи тега <source> video и audio треков. Оба свойства могут применяться как к video так и к audio объекту, так как видео элемент отличается от аудио элемента только наличием области для отображения видео и постера, а в остальном различий между ними нет. Несмотря на то, что AudioTrackList и VideoTrackList объекты позволяют, согласно спецификации, полноценно манипулировать подключенными медиа файлами для audio и video элементов, этот функционал пока не реализован в большинстве браузеров, и поэтому на практике не используется. На удивление, в IE11 свойства audioTracks и videoTracks работают.

 

.textTracks

media.textTracks //TextTrackList object, только для чтения

Свойство textTracks  медиа элементов video и audio возвращает TextTrackList  объект, который представляет набор доступных для данного медиа элемента TextTrack  объектов (текстовых треков). Это свойство доступно в большинстве браузеров и позволяет манипулировать подключенными к медиа элементу текстовыми треками. Из возвращаемого TextTrackList можно получить нужный TextTrack  по его индексу и извлечь из него текстовые фразы, которые привязаны к временной шкале медиа файла.

 

Пример использования свойства media.textTracks

//получить количество доступных текстовых треков
//для медиа элемента audio/video
myVideo.textTracks.length

//получить TextTrack объект по его индексу в TextTrackList
myVideo.textTracks[index]

//получить TextTrack объект по его имени из TextTrackList или null
var textTrack = myVideo.textTracks.getTrackById(id)

Смотри также использование .addTextTrack()  метода для примера манипуляции с TextTrack  объектом.

 

Пример video:

Для работы с примером видо на этой странице при демонстрации JS использовано присвоение объекта видео в переменную JS с именем "myVideo".

Также смотри примеры на странице: "Демонстрация JS управления HTML5 video и audio.