<!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="/sandbox/12/dream.mp4"></source>
<track default kind="captions"
srclang="en"
src="/sandbox/12/dream.mp4"/>
</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>
