How to jump to time offsets in HTML5 video

Let's say that you have a 30-minute WEBM video file, from which you just want to play the following video segments, jumping from one to the other automatically without interruptions:

1. [00:01:25.00 - 00:02:25.00] -> from second 85 to 145
2. [00:11:40.00 - 00:11:55.00] -> from second 700 to 715
3. [00:20:26.00 - 00:21:07.00] -> from second 1226 to 1267
4. [00:26:11.00 - 00:28:01.00] -> from second 1571 to 1681

To increase the complexity, let's think that you have these video segments in a PHP variable $arrayVideoSegments (normally the case if they were retrieved from the database).

  $arrayVideoSegments[0]->startTime = 85

  $arrayVideoSegments[0]->endTime = 145

  $arrayVideoSegments[1]->startTime = 700

  $arrayVideoSegments[1]->endTime = 715

  $arrayVideoSegments[2]->startTime = 1226

  $arrayVideoSegments[2]->endTime = 1267

  $arrayVideoSegments[3]->startTime = 1571

  $arrayVideoSegments[3]->endTime = 1681

The following code will play these video segments one after the other in an HTML5 Video object, using some Javascript and PHP.

<!-- BEGIN - HTML5 Video Object -->

<video id="myVideoPlayer" controls preload="metadata"">
  <source src="myVideo.webm" type="video/webm">
</video>

<!-- END - HTML5 Video Object -->

<!-- BEGIN - Migration from PHP Array to Javascript array -->

<script>

  <?php

    // Encode this array in a Javascript-friendly array

    $jsArrayVideoSegments = json_encode($arrayVideoSegments);

    // Declare this array in Javascript from PHP
    echo "var videoSegments = ". $jsArrayVideoSegments . ";\n";

  ?>
  playVideoSegments(videoSegments);

</script><!-- END - Migration from PHP Array to Javascript array -->

<!-- BEGIN - Video segment jump controller -->

<script language="javascript">
  function playVideoSegments(videoSegments) {

    var currentSegment = 0; // Segment being played
    var endTime = videoSegments[currentSegment]['endTime'];
    var videoPlayer = document.getElementById('myVideoPlayer');

    videoPlayer.currentTime = videoSegments[currentSegment]['startTime'];

    videoPlayer.play(); // Starts playing the video from startTime

    // This listener checks the video current time every 250ms    videoPlayer.addEventListener("timeupdate", function() {

      if(videoPlayer.currentTime >= endTime) {

        // Segment completed

        currentSegment++;

        if(currentSegment < videoSegments.length) { 

          // Not the last segment in the array

          videoPlayer.currentTime = videoSegments[currentSegment]['startTime'];

          endTime = videoSegments[currentSegment]['endTime'];

        } 

        else {

          // Last segment in the array is over

          videoPlayer.pause();

        }

      }

    }, false);

  }
</script>

<!-- END - Video segment jump controller -->