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

5 learnings from a techie turned into a NFT artist

In September 2021 I chose to sell my crypto AI art business after two enriching (and often painful) years as a part-time sole founder. Today  AImade.art  is one of the best-selling AI art collections on Opensea . I want to share with you some of the key lessons I learned during this period: Work hard and get lucky.  And I got really lucky. On February 24th 2021 I had planned to shut down AImade.art , back then a business selling AI Art printed on canvas. I was discouraged after several months with no sales and my Shopify billing cycle was ending that day. Then something incredible happened: I missed the Shopify deadline and I sold an artwork one hour later. The buyer asked me: " Can I get it in as an NFT? ". I had absolutely no idea what an NFT was, but after a bit of research I found the concept so interesting that, two days later, I had pivoted the entire business to  NFT art made by AI . Sales started to pick up: I had finally found product-market fit . Impostor syn

Microsoft will soon launch a feature to schedule chat messages on Teams

In 2021 I wrote an article  where I shared why I started scheduling my emails and the positive impact this easy action has had on the wellbeing of the recipients and on my own work-life balance . However, one of my frustrations is that, as of today, it is not possible to schedule chat messages or posts on Microsoft Teams. Have you ever received a push notification on a Friday evening  from a non-urgent message that could have easily waited until Monday? Yes, you know what I am talking about! The good news is that Microsoft is currently working on this feature, and it is expected to be released in July 2022 , as we can see on Microsoft's roadmap . It was back in June 2019 when this useful functionality was first proposed on Microsoft Tech Community . It soon gained many supporters that pushed it through the approval channels. I can't wait to start using this!