HTML5 video currentTime and timeupdate event not updating

On a recent project I ran across a major problem with the timeupdate event of the html5 video tag. I tested the project on an iPad and sometimes the currentTime wasn’t updated. Especially when I set the currentTime before. This behavior never appeared in the desktop browser. Of course when the currentTime isn’t updated, also the timeupdate event doesn’t fire.

The solution was sort of a monitor, that watches the currentTime periodically by a setInterval function. If it doesn’t change between two periods, I stopped and restarted the video. Also I added a counter, so the pause/start action only fires after a number of same times. This solves the problem and the time is updated again as usual.

This is a code sample of such a monitor:

     
     //monitoring if video time is stuck
     var oldTime = 0;
     var time = 0;
     var vidStuckCount = 0;
     setInterval(function(){
         oldTime = time;
         time = document.getElementById("video").currentTime;  
         if(time == oldTime){
              vidStuckCount++;
              if(vidStuckCount >= 1){
                  pauseVideo();
                  playVideo();
                  vidStuckCount = 0;
              }
         }
     }, 1500);

 

This page is also available in: German

2 Comments

  1. That piece of code is useless, because it can pause and play the video all the time.

    • It only pauses and restarts a video if it is stuck. If its running nothing happens. If a video is stuck you would like it to restart again anyway, so thats of a use.

      Of cause you have to check, if the user paused the video manually, else the video would restart automatically after some time.
      But that wasn’t part of my task…

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>