HTML5视频 - 在iPhone上无法正确设置currentTime [英] HTML5 video - currentTime not setting properly on iPhone

问题描述

我有一个基本的html 5视频设置，我可以从中加载四个视频中的一个。我遇到的问题是，当我加载下一个视频时，它继续从前一个时间位置播放。设置currentTime属性的努力似乎是短暂的或完全被忽略。

I have a basic html 5 video set up from which I load one of four videos. The problem I'm having is that when I load the next video it continues playing from the previous time position. Efforts to set the currentTime property seem to be either short lived or ignored entirely.

我已将听众添加到一系列事件中，每个事件都有这样的内容;

I have added listeners to a collection of events and have something like this in each one;

myPlayer.addEventListener("loadeddata", function() {
        console.log(" loadeddata: before = " + myPlayer.currentTime);
        myPlayer.currentTime = 0.1;
        console.log(" loadeddata: after = " + myPlayer.currentTime);
    }, false);

有时我看到一个事件的时间变化但没有正确保存;

Sometimes I see the time change for one event but not persist correctly;

durationchange: before = 19.773332595825195
durationchange: after = 0.10000000149011612

loadedmetadata: before = 0.10000000149011612
loadedmetadata: after = 19.773332595825195

loadeddata: before = 19.773332595825195
loadeddata: after = 0.10000000149011612

canplay: before = 0.10000000149011612
canplay: after = 19.773332595825195

有时甚至似乎根本没有设置;

And sometimes it never even seems to set at all;

durationchange: before = 50.66666793823242
durationchange: after = 50.66666793823242

loadedmetadata: before = 50.66666793823242
loadedmetadata: after = 50.66666793823242

loadeddata: before = 50.66666793823242
loadeddata: after = 50.66666793823242

canplay: before = 50.66666793823242
canplay: after = 50.66666793823242

这似乎与此处的问题类似 HTML5视频 - 没有设置当前时间但似乎没有任何解决方案。有没有人在iPhone之前遇到过这个问题？

This seems similar to the issue here HTML5 video - not setting the current time but there didn't seem to be any resolution. Has anyone encountered this issue on iPhone before?

推荐答案

从我的发现来看，这个问题似乎只在iPhone上有效（iPad工作正常）在canplaythrough事件之前，currentTime属性将无法正确设置，但是在此时更改currentTime将导致明显的打嗝。解决方法是在调用load后有意暂停视频...

From my findings the issue seems to be that on iPhone only (iPad works fine) the currentTime property will not be set correctly until the "canplaythrough" event, however changing the currentTime at that point will cause a noticeable hiccup. The solution for that would be to intentionally pause the video after calling load...

myVideo.load();
myVideo.pause();        

...然后在时间重置时调用play。

...and then call play in the event when the time has reset.

然而，第二个问题是当新电影的持续时间短于当前时间位置时。在这种情况下，currentTime不仅没有设置，而且canplaythrough从未被调用，而QT只是在视频结尾处无所事事。

The second problem however is when the duration of the new movie is shorter then the currentTime position. In this case not only does currentTime fail to set but "canplaythrough" is never called, and QT just sits at the end of the video doing nothing.

我发现了解决方案对于这两个问题，如果在canplaythrough之前的事件中没有重置currentTime，则强制进行二次加载。它与计时器回调有点关系，但似乎可以解决问题;

I discovered the solution to both problems was to force a secondary load if the currentTime was not reset in the event BEFORE "canplaythrough". Its a bit round about with the timer callback but it seems to do the trick;

var myVideo = document.getElementById("video1"); 

myVideo.addEventListener("canplay", function() {
    console.log(" canplay: before = " + myVideo.currentTime);
    myVideo.currentTime = 0.1;
    console.log(" canplay: after = " + myVideo.currentTime);

    if( myVideo.currentTime < 1 ) {
        myVideo.play();
    }
    else {
        myVideo.load();
        myVideo.pause();
        setTimeout(checkStarted, 500);
    }
}, false);

function checkStarted()
{ 
    console.log(" checkStarted called");
    myVideo.play();
}

这篇关于HTML5视频 - 在iPhone上无法正确设置currentTime的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！