You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
753 B
HTML
26 lines
753 B
HTML
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title></title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<p>Playing with <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement/cuechange_event">cuechange</a> events.</p>
|
||
|
|
|
||
|
|
<video controls>
|
||
|
|
<source src="dream.mp4"></source>
|
||
|
|
<track default kind="captions"
|
||
|
|
srclang="en"
|
||
|
|
src="dream.en.vtt"/>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var track = document.querySelector("track");
|
||
|
|
track.addEventListener('cuechange', function () {
|
||
|
|
let cues = track.track.activeCues; // array of current cues
|
||
|
|
console.log("cuechange", cues, cues[0].text, cues[0].startTime, cues[0].endTime);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|