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

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

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
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 transcripts = [{
  "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
}]

//// 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 video = document.getElementById("preview");
var playBtn = document.getElementById('playButton');
var stopBtn = document.getElementById('stopButton');
var pauseButton = document.getElementById('pauseButton');
var counter = 0;

function playVideoSegments(videoSequence) {
  if (counter <= videoSequence.length - 1) {
    // initialised counter to play video segments in the array    
    /*******************base case, first video ****************/
    //base case, playing first video segment in sequence
    var videoSrc = videoSequence[counter]['src'];
    var inPoint = videoSequence[counter]['startTime'];
    var outPoint = videoSequence[counter]['endTime'];
    // helper function to play one video segment
    video.src = videoSrc + "#t=" + inPoint + "," + outPoint;
    console.log(video.src);
    video.load;
    video.play();
    counter += 1;

    video.addEventListener("timeupdate", function() {
    if(counter <= videoSequence.length - 1){
        if (video.currentTime >= outPoint) {
          videoSrc =...