Wednesday, April 6, 2016

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