TextTrack.oncuechange

TextTrack.oncuechange - зміна текстового рядка.

Синтаксис:

TextTrack.oncuechange=function(event){
// код функції, яка виконується коли відбувається подія
};

Параметри:

TextTrack - об'єкт TextTrack.

event - об'єкт Event який передається в якості параметру функції.

Опис:

oncuechange подія об'єкта TextTrack яка виникає коли змінюється текстовий рядок для показу у текстовій доріжці.

Приклад:

<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();

Відображаємо субтитри з елемента video:

<video id="video" width="480" controls>
<source src="/dani/test.mp4"></source>
<track id="track" src="/dani/test.vtt" kind="subtitles" label="test VTT" srclang="ua" default></track>
</video>
<div id="result2"></div>

var video=document.getElementById('video');
var track=video.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('result2').innerHTML=s;
	}
video.play();