dream html example

4 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>