HTML5 Video Play sequence of video segments using ....mp4#t=2,4 and setTimeOut

HTML5 Video Play sequence of video segments using format http://solutions.brightcove.com/bcls/assets/videos/Bird_Titmouse.mp4#t=2,4 and setTimeOut

by Pietro Passarelli

HTML

<video id="preview" width="400">
  <!--   <source src="" type="video/mp4"> -->
  <!--   <source src="" type="video/ogg"> -->
  Your browser does not support HTML5 video.
</video>

<button id="playButton">play</button>
<button id="pauseButton">pause</button>
<button id="stopButton">Stop</button>

JavaScript

/* HTML5 Video Play sequence of video segments using format, and `setTimeout`.
http://solutions.brightcove.com/bcls/assets/videos/Bird_Titmouse.mp4#t=2,4
- Working
*/

//sample sequence of video segments, array of objects with src, in point, and outpoint.
var playlist = [{
  "src": "http://solutions.brightcove.com/bcls/assets/videos/SeaTurtle.mp4",
  "startTime": 3,
  "endTime": 6
}, {
  "src": "http://solutions.brightcove.com/bcls/assets/videos/Water-Droplet.mp4",
  "startTime": 1,
  "endTime": 3
}, {
  "src": "http://dl1.webmfiles.org/big-buck-bunny_trailer.webm",
  "startTime": 1,
  "endTime": 6
}, {
  "src": "http://solutions.brightcove.com/bcls/assets/videos/Water-Droplet.mp4",
  "startTime": 1,
  "endTime": 3
}]

//// to try with webm video eg nwjs that does not support mp4
//var videoSequence = [{"src": "http://dl1.webmfiles.org/big-buck-bunny_trailer.webm", "startTime":3.2 , "endTime":6},{"src": "http://dl1.webmfiles.org/elephants-dream.webm", "startTime": 1, "endTime":3},{"src": "http://dl1.webmfiles.org/big-buck-bunny_trailer.webm", "startTime": 10, "endTime":15}]

var playBtn = document.getElementById("playButton");
var stopBtn = document.getElementById("stopButton");
var pauseBtn = document.getElementById("pauseButton");
var video = document.getElementById("preview");
var counter = 0;
var numberOfClips = playlist.length - 1;
var timer;

function playSequence(playlist) {
  var segment = playlist[counter];
  video.setAttribute("src", segment.src + "#t=" + segment.startTime + "," + segment.endTime);
  video.load;
  video.play();
  var stopVideoAfter = (segment.endTime - segment.startTime) * 1000;
  //call function to stop player after given intervall
  //* 1000, because Timer is in ms
  // https://stackoverflow.com/questions/9845565/in-html5-video-how-to-play-a-small-clip-from-a-long-video
  timer = setTimeout(function() {
    video.pause();
    console.log(counter, numberOfClips);
    if (counter < numberOfClips) {
      counter += 1;
     ...