dream html example

5 years ago · ef52bbce86
parent 07a6e0e4d5
commit ef52bbce86
1 changed files with 26 additions and 0 deletions
--- a/player/dream.html
+++ b/player/dream.html
@ -0,0 +1,26 @@
 <!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>