Материалы для WEB разработки на LAMP
JS метод .addTextTrack() HTML элементов Audio и Video

В статье описано использование метода media.addTextTrack() Java Script, который добавляет к HTML5 медиа элементу audio или video текстовый трек. Приведены примеры использования метода и листинги JS кода.

 

.addTextTrack()

var track1 = myVideo.addTextTrack ( kind [, label [, language ] ] );

Метод выполняет добавление в лист текстовых треков медиа элемента новой текстовой дорожки и возвращает созданный новый TextTrack объект, который в примере кода присвоен в переменную text1. Созданный новый TextTrack объект предоставляет возможность управления собой и получает переданные .addTextTrack() методу "kind", "label", "language" параметры и состояние как "loaded", вид как "hidden", и пустой список временных меток (cues). Для добавления в новый текстовый трек временных меток (cues) и текста к ним, для вывода поверх видео, и выполнения других манипуляций, нужно уже обращаться к методам и свойствам созданного TextTrack JS объекта.

Параметры метода .addTextTrack():

  • kind - задает тип текстового трека и может принимать значения: "subtitles", "caption", "descriptions", "chapters", "metadata"
  • label - строка, которая задает название для новой текстовой дорожки в плеере.
  • language - строка из двух символьного кода языка, которая задает язык для новой текстовой дорожки.

 

Свойства и методы TextTrack объекта:

//метод getTrackById(), получить textTrack из медиа элемента через его свойство textTracks
textTrack = media.textTracks.getTrackById( id )

//свойство kind, только чтение, вернет строку: тип трека
textTrack.kind

//свойство label, только чтение, вернет строку: этикетка трека или пустую строку
textTrack.label

//свойство language, только чтение, вернет строку: код символа языка
textTrack.language

//свойство id, только чтение, вернет строку: ID трека
textTrack.id

//свойство, только чтение, вернет строку: тип метаданных
textTrack.inBandMetadataTrackDispatchType

//свойство mode, получить или установить вид режима для трека, доступны:
//"disabled", "hidden", "showing"
textTrack.mode [ = value ]

//свойство cues, только чтение, вернет TextTrackCueList объект
textTrack.cues

//свойство activeCues, только чтение, вернет TextTrackCueList объект
//с активными в данный момент cues
textTrack.activeCues

//метод addCue(), добавление временной метки в textTrack
textTrack.addCue( cue )

//метод removeCue(), удаление временной метки из textTrack
textTrack.removeCue( cue )

 

Пример использования .addTextTrack() метода:

В пример показано динамическое добавление к video элементу текущей страницы нового текстового трека. Затем в этот текстовый трек добавляются временные метки с заданными именами. И в конце примера выполняется навигация по видео через использование временных меток из созданного трека путем обращения к ним по их именам и получения времени старта метки. Полученное время старта устанавливается как свойство currentTime медиа объекта и с этого времени начинается воспроизведение. Для чего можно использовать такой подход? Например, вы можете воспользоваться этим для создания и добавления пользователем на странице с видео динамических пользовательских закладок для выбранного медиа объекта. Можно написать функцию которая будет получать currentTime медиа объекта и создавать для этого времени временную метку и добавлять ее в трек к видео и затем добавлять под видео кнопку с запуском видео с этой временной метки. Эту функцию можно запускать по кнопке, которую будет нажимать пользователь при просмотре видео для того, что бы поставить свою закладку. Таким образом пользователь сможет добавить для просматриваемого видео свои закладки и потом переключаться между ними для быстрой навигации и перемещению по видео. Также, созданный пользовательский список временных меток можно будет сохранить и в последующем загружать этому пользователю вместе с видео.

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

var myVideo = document.getElementById("video-example-1");

Поэтому для экспериментов в консоли вы можете использовать эту переменную. Например: myVideo.play(); - запустит воспроизведение примера видео на этой странице.

//JS функции для работы с примером:

//эта функция будет добавлять временные
//метки в созданный TextTrack объект
function myAddCue(start, end, name, track) {
    
  //start - время старта метки
  //end - время окончания метки
  //name - строка, имя метки для обращения к ней
  //track - TextTrack объект в который будут добавлены метки

  var cue = new VTTCue(start, end, '');
  cue.id = name;
  cue.pauseOnExit = true;
  track.addCue(cue);
}

//будет включать воспроизведение видео примера
//начиная с указанного во временной метке времени старта
function playClip(name, track, media) {

  //name - строка, имя метки для обращения к ней
  //track - TextTrack объект в который будут добавлены метки
  //media - video/audio объект
 
  media.currentTime = track.cues.getCueById(name).startTime;
  media.play();
}

//Использование и демонстрация:
//получим медиа объект в переменную
var myVideo = document.getElementById("video-example-1");

//Добавим новый трек к видео примера и поместим его в переменную
var track1 = myVideo.addTextTrack('subtitles', 'Track1', 'ru');

//добавим временные метки в этот трек:
//с 1 по 60 секунду видео, имя метки - 'play from 1c'
myAddCue('01.000', '60.000', 'play from 1c', track1);
//с 120 по 240 секунду видео, имя метки - 'play from 120c'
myAddCue('120.000', '140.000', 'play from 120c', track1);
//с 480 по 600 секунду видео, имя метки - 'play from 480c'
myAddCue('180.000', '240.000', 'play from 180c', track1);

//теперь, когда заданы временные метки для видео, можно выполнить
//навигацию по воспроизведению файла при помощи кнопок за которыми
//ниже описанные действия можно закрепить,
//и нажатием на кнопки выполнять переключение
//воспроизведения видео на заданное в метках время
playClip('play from 1c', track1, myVideo); //для кнопки "Воспроизводить с 1 секунды"
playClip('play from 120c', track1, myVideo); //для кнопки "Воспроизводить со 2 минуты"
playClip('play from 180c', track1, myVideo); //для кнопки "Воспроизводить с 3 минуты"

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