HTML5 video - setting video.currentTime breaks the player

问题

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:

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

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

EDIT: It was pointed out to me that skipping very much ahead breaks, but skipping a short distance actually works well. Could be related to commercials interspersed.

回答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();

回答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");
               }
     }

回答3:

Pls. try this:

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

hv.play();
hv.addEventListener('canplay', function() {
    this.currentTime = 500;
});

回答4:

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;
}

来源：https://stackoverflow.com/questions/43635136/html5-video-setting-video-currenttime-breaks-the-player

标签

javascript

promise

html5-video