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

How to disable cookies on Google Analytics so that you don't need a consent banner

The integration of Google Analytics into a website or blog is not GDPR-compliant by default . You must first obtain explicit consent of the end-users to store cookies, describing in your privacy policy how you intend to use collected personal data. This is the reason why most websites nowadays display an annoying (but necessary) consent banner. If you fail to do so or if you only ask for implicit consent, you are at risk of being fined. However, it is possible to disable cookies on Google Analytics (GA) respecting end-users privacy, so that you don't need to ask for consent. The downside is that you will not be able to distinguish the type of user (unique vs new vs returning) and you will miss some session insights. If these details are not relevant for you, here is how you do it. Disable Google Analytics cookies on a custom website If you have a custom website with full access to the source code, you can simply insert the script below between the <head>  and </head>

Temario del curso "Startup Innovation Lab"

En 2017 publiqué, en el marco del curso Startup Innovation Lab , este vídeo explicando el Lean Canvas en español usando Spotify como ejemplo ilustrativo.  Me ha sorprendido muy gratamente comprobar que, cinco a ñ os después, el vídeo se acerca a las 100.000 reproducciones. Algunas personas me han escrito preguntando dónde pueden acceder al resto de materiales del curso. El curso ya no se imparte, pero he decidido publicar el temario completo en PDF por si fuese de utilidad. En total son 10 módulos  que cubren distintas temáticas sobre la puesta en marcha de ideas de negocio innovadoras. 1. Introducción a Lean Startup 2. Lean Canvas y Business Model Canvas 3. Métricas de Negocio 4. Estudio de Mercado 5. Producto Mínimo Viable 6. Constitución de la Empresa 7. Fuentes de Financiación 8. Modelo de Ingresos y Plan Financiero 9. Plan de Negocio 10. Pitch de Presentación del Negocio Tengan en cuenta que este contenido no ha sido actualizado desde su creación en 2017 y se ofrece si