Video WebVTT - Sample

by dledle2

HTML

<video width="320" height="240" controls poster="https://archive.org/download/WildlifeSampleVideo/WildlifeSampleVideo.thumbs/Wildlife_000009.jpg">
  <source src="https://ia800209.us.archive.org/24/items/WildlifeSampleVideo/Wildlife.mp4" type="video/mp4">
  <track  kind="captions" srclang="en-us" label="English" default>
</video>

CSS

video::cue {
  background-color: rgba(0, 0, 0, 0.6);
  font: bold 18px / 1.5 sans-serif;
  position: relaive;
  color: #f5eea2;
  top: 0;
}

video::cue-region {
  width: 100%;
}

JavaScript

var tracks = document.querySelector('video').textTracks;
var track = tracks[0];

// Add cues for sounds we care about.
track.lineAlign = 'middle';
track.positionAlign = 'line-left';
track.kind = "captions";
track.label; // "Captions"
track.language = "English";
track.line = 1;
track.addCue(new VTTCue(1, 5, 'This is only a test')); // startTime, endTime, text
track.addCue(new VTTCue(6, 10, 'Just to see how powerful is webvtt'));
track.addCue(new VTTCue(11, 15, 'Very good feature for setting caption close to videos'));
track.addCue(new VTTCue(16, 20, 'HTML5 is getting more powerful with time...'));
track.addCue(new VTTCue(21, 25, '...by making things possible on the client side'));
track.addCue(new VTTCue(26, 30, 'without the use of backend or heavy duty technology.'));
//englishTrack.addCue(new VTTCue(4, 5, 'kitten mew'));

/*
var track = video.textTracks[0];
  var cue = track.cues[0];

  // Set some of these values initially
  cue.line = 13;
  cue.position = 50;
  cue.align = 'middle';
  cue.size = 100;
  cue.vertical = '';
  */