Friday, May 5, 2017

HTML5 video - setting video.currentTime breaks the player

Leave a Comment

I am trying to interact with a 3rd-party html5 video player in Chrome. I am able to obtain a valid reference to it thusly:

document.getElementsByTagName("video")[1] 

...and the readyState is 4, so it's all good.

I can successfully (and with expected result) call:

document.getElementsByTagName("video")[1].play(); document.getElementsByTagName("video")[1].pause(); 

BUT when I call:

document.getElementsByTagName("video")[1].currentTime = 500; 

...the video freezes and it doesn't advance to the new currentTime. The video duration is much longer than 500 seconds, so it should be able to advance to that spot. I have tried other times besides 500, all with same result. If I examine currentTime, it is correct as to what I just set. But it doesn't actually go there. Also I can no longer interact with the video. It ignores any calls to play() or pause() after I try to set currentTime.

Before I call currentTime, when I call play() I get this valid promise back, and everything else still works: enter image description here

After I call currentTime, when I call play(), I get this broken promise back, and now nothing works on that video object:enter image description here

If you have a Hulu account you can easily observe this behavior on any video by simply trying it in the Chrome developer console.

3 Answers

Answers 1

Try below code, it will first pause then set your position then again play

document.getElementsByTagName("video")[1].pause(); document.getElementsByTagName("video")[1].currentTime = 500; document.getElementsByTagName("video")[1].play(); 

Answers 2

Why don't you try this code.

function setTime(tValue) {         //  if no video is loaded, this throws an exception              try {                 if (tValue == 0) {                     video.currentTime = tValue;                 }                 else {                     video.currentTime += tValue;                 }               } catch (err) {                  // errMessage(err) // show exception              errMessage("Video content might not be loaded");                }      } 

Answers 3

    var myVideo=document.getElementsByTagName("video")     if(myVideo[1] != undefind)         {              myVideo[1].currentTime=500;        }    /* or provide id to each video tag and use getElementById('id')    */     var myVideo=document.getElementById("videoId")     if(myVideo != undefind)         {              myVideo.currentTime=500;        } 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment