Skip to main content

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

Popular posts from this blog

The Ethics Canvas

In 2008, Alexander Osterwalder presented an innovative tool called " Business Model Canvas " (BMC) that aimed to help entrepreneurs to capture the fundamental business knowledge about their project, and bring about pivots in order to make the business model more consistent and successful.  Since then, the BMC has helped over 5 million entrepreneurs increase the value that they provide to their users, and find a sustainable model. In 2015, a group of researchers from ADAPT Centre  started using a similar approach in order to detect at early stage all the ethical implications of a project, and help entrepreneurs and researchers pivot their idea in order to minimise these issues. If you think about new technologies such as biotech, AI, IoT, VR, biometrics, blockchain, 3D printing,... they all bring great advancements for humanity, but they have some potential ethical issues that could have a catastrophic impact. After some months of hard work and experiments, we h

El Lean Canvas, explicado paso a paso

Tengo el honor de ser profesor del curso Startup Innovation Lab , del Plan de Empleo para la Educación Superior , en el que jóvenes canarios en situación de desempleo descubren las principales técnicas de emprendimiento siguiendo la metodología Lean Startup . Dado que no hay muchos ejemplos prácticos y en español sobre cómo completar el Lean Canvas , he creado un vídeo de 14 minutos en el que se explica, paso a paso, cómo completar el canvas utilizando Spotify como producto de ejemplo. Éste es el canvas resultante. Espero que sea de utilidad al igual que lo está siendo para mis alumnos.