HTML5 video currentTime und timeupdate event wird nicht aktualisiert

In einem kürzlichen Projekt hatte ich das Problem, dass currentTime und das timeupdate Event eines HTML5 Videos nicht zuverlässig funktioniert haben. Das Problem ist allerdings nur beim Testen auf einem iPad aufgetreten. Im Desktop-Browser funktionierte das Update zuverlässig.

Die Lösung des Problems war für mich das Einführen einer Überwachungsfunktion, die mittels setInterval currentTime periodisch ausliest. Sobald currentTime sich zwischen den Abfragen nicht mehr ändert wird das Video mittels pause() und play() unterbrochen und neu gestartet. Danach werden die Zeiten in currentTime wieder normal durchgeführt und damit feuert auch der timeupdate Event wieder normal.

Hier ist ein Code-Beispiel eines solchen Monitors:

     
     //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);

 

Diese Seite ist auch verfügbar in: Englisch

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>