TextTrack

TextTrack - об'єкт для обробки і контролю WebVTT (текстові доріжки для медіа).

Синтаксис:

var textTrack= HTMLMediaElement.addTextTrack( kind, label, language );

Параметри:

textTrack - змінна які присвоюється об'єкт TextTrack.

HTMLMediaElement - об'єкт HTMLMediaElement.

kind - рядок який містить тип текстової записі.

label - рядок який містить заголовок текстової доріжки.

language - рядок який вказує мову тексту у форматі BCP47. Наприклад: 'en', 'fr' 'uk'.

Опис:

TextTrack об'єкт для обробки і контролю WebVTT (текстові доріжки для медіа).

Текстова доріжка складається з "сигналів" - текстового рядка який відображається і приховується у вкзаний час відтворення. Тобто об'єкт TextTrack містить об'єкти VTTCue.

Приклад:

Відображаємо текст пісні з елемента audio:

<audio id="player" controls> <source src="/dani/lviv.mp3"></source> <track id="track" src="/dani/lviv.vtt" kind="subtitles" label="Текст пісні" srclang="ua" default></track> </audio> <div id="result"></div> var player=document.getElementById('player'); var track=player.textTracks[0]; track.oncuechange=function(){ var s=''; for(var i=0,len=this.activeCues.length;i<len;i++) s+='<p>'+this.activeCues[i].text+'</p>'; document.getElementById('result').innerHTML=s; } player.play();

Приклад додавання тексту пісні до субтитрів за допомогою самого JavaScript без використання файлу VTT:

<video id="video1" controls="controls" src="/dani/lviv.mp3" width="480"></video> var video = document.getElementById("video1"); var startTime, endTime, message; var textTrack = video.addTextTrack("captions", "текст пісні"); //додаємо нову текстову доріжку textTrack.mode = 'showing'; //включаємо режим показу //додаємо нові текстові рядки до текстової доріжки textTrack.addCue(new VTTCue(0, 10, 'гурт "Чорно-Білі", пісня "Мій дім Львів')); textTrack.addCue(new VTTCue(39, 42, 'Ти запитаєшь де мій дім, я покажу на захід')); textTrack.addCue(new VTTCue(42, 45, 'Там де сонячне проміння відбивається від мокрих дахів')); textTrack.addCue(new VTTCue(45, 49, 'Там де посміхаються прохожі при любих обставинах, при любій погоді')); textTrack.addCue(new VTTCue(49, 52, 'Неважливо чи дождь чи сонце, чи сухо чи мокро')); textTrack.addCue(new VTTCue(52, 54, 'Я - львівянин - це заявляю гордо.')); textTrack.addCue(new VTTCue(54, 56, 'Львів мій дім, дім мій Львів.')); textTrack.addCue(new VTTCue(56, 58, 'Пісня ллється зі всіх сторін.')); textTrack.addCue(new VTTCue(58, 60, 'Львів один - нас багато.')); textTrack.addCue(new VTTCue(60, 63, 'Тому давайте поважати ту хату в якій лягаєм спати')); textTrack.addCue(new VTTCue(63, 65, 'Потрібно вміти цінувати все, що дано')); textTrack.addCue(new VTTCue(65, 68, 'тобі тут зустрічати ще не один ранок.')); textTrack.addCue(new VTTCue(68, 70, 'Пари цілуються на лавочках, в парках')); textTrack.addCue(new VTTCue(70, 78, 'хтось оглядає Львів з високого замку, хтось слухає мене, хтось ігнорує, але це не важливо бо цю пісню ми місту даруєм.')); textTrack.addCue(new VTTCue(78, 83, 'ти запитаєш мене де мій дім, я відповім, мій дім Львів')); textTrack.addCue(new VTTCue(83, 87, 'у відповідь я нічого не почую, цю пісню свому місту даруєм')); textTrack.addCue(new VTTCue(87, 91, 'запитаєш мене, де мій дім, я відповім, мій дім Львів')); textTrack.addCue(new VTTCue(91, 100, 'у відповідь я нічого не почую, цю пісню місту даруєм.')); textTrack.addCue(new VTTCue(97, 102, 'Я сів на лавочці, дивлюсь, спостерігаю як люди біля мене мимо пробігають...')); textTrack.addCue(new VTTCue(102, 107, 'поспішають, біжать, хто куди...одні просто гуляють, другі в магазини..')); textTrack.addCue(new VTTCue(107, 110, 'помічаючи краси яка навколо них...')); textTrack.addCue(new VTTCue(110, 116, 'будинки німих, вуличок старих вузьких стелених бруківкою, просочених вічністью...')); textTrack.addCue(new VTTCue(115, 118, 'немає кращого, немає красивішого...')); textTrack.addCue(new VTTCue(117, 121, 'Площа Ринок - серце Львова, Майже всі дороги ведуть сюди,')); textTrack.addCue(new VTTCue(121, 127, 'Тут є все, для, душевної гармонії: пам\'ятники, фонтани і трамвайні колії...')); textTrack.addCue(new VTTCue(127, 132, 'якщо попадеш сюди тобі буде куди піти музеї, галереї, театри і церкви...')); textTrack.addCue(new VTTCue(132, 136, 'хіба кращий дім у світі існує цю пісню свому місту дарую.')); textTrack.addCue(new VTTCue(136, 141, 'ти запитаєш мене де мій дім, я відповім, мій дім Львів.')); textTrack.addCue(new VTTCue(141, 146, 'у відповідь я нічого не почую, цю пісню свому місту даруєм.')); textTrack.addCue(new VTTCue(146, 152, 'запитаєш мене, де мій дім, я відповім, мій дім Львів')); textTrack.addCue(new VTTCue(152, 160, 'у відповідь я нічого не почую, цю пісню місту даруєм.')); textTrack.addCue(new VTTCue(160, 169, 'моє місто Львів, нехай знают всі де мій дім...')); textTrack.addCue(new VTTCue(169, 178, 'моє місто Львів нехай знают всі де мій дім...')); textTrack.addCue(new VTTCue(178, 180, 'моє місто Львів нехай знают всі де мій дім...')); textTrack.addCue(new VTTCue(180, 188, 'моє місто Львів нехай знают всі де мій дім...')); textTrack.addCue(new VTTCue(188, 198, 'моє місто Львів нехай знают всі де наш дім...')); video.play();