HTML5视频 - 在iPhone上无法正确设置currentTime

Question

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

我已将听众添加到一系列事件中,并在每个事件中都有类似的内容;

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

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

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

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

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之前遇到过这个问题？

Answer 1

根据我的发现,问题似乎是仅在iPhone上(iPad工作正常),currentTime属性在"canplaythrough"事件之前将无法正确设置,但是在此时更改当前时间将导致明显的打嗝.解决方案是在调用load后故意暂停视频...

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

...然后在时间重置时调用播放.

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

我发现这两个问题的解决方案是在"canplaythrough"之前的事件中没有重置currentTime时强制进行二次加载.它与计时器回调有点圆,但它似乎做了伎俩;

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

Answer 2

TL; DR：变化currentTime的loadeddata事件。这也适用于音频。

看起来Safari（并且问题仍然出现在Safari 11.1上）是SafaricurrentTime在首次加载视频时不允许更改，如果它还没有加载帧currentTime。更大的问题：错误的解决方案可能会破坏 Chrome（也可能是其他浏览器）。

幸运的是，我们有很多可以在媒体加载时监听的事件：

在音频/视频的加载过程中，会按以下顺序发生以下事件：

1. 加载启动
2. 持续时间变化
3. 加载元数据
4. 加载数据
5. 进步
6. 可以玩
7. 可通关

- W3Schools（我知道这不是首选来源，但我在 MDN 上找不到相同的信息）

我尝试调整currentTime不同的事件，但在前 3 个事件中，Safari 会将时间移回 0；在 5 和 6 上，它似乎阻止了视频在 Chrome 中播放，因为它会卡住currentTime（我可以解决这个问题，但我认为有更好的解决方案）。

（我不想必须加载整个文件才能到达正确的位置，因为我想支持大型视频。所以canplaythrough对我来说不是一个选择。）

loadeddata事件描述如下：

loadeddata当媒体的第一帧完成加载时触发该事件。

- MDN

当我更改为currentTime时loadeddata，Safari 可以判断框架已加载且可用，并且会正确更新。它也不会导致 Chrome 在播放时冻结在一个地方。

音频的问题和解决方案是相同的。

Answer 3

我必须将preload属性设置为metadata（在主视频元素的 HTML 上）并在事件侦听器currentTime中设置视频元素的loadedmetadata。

 <video id="myVideo" preload="metadata">
    <source src="/path/to/video" type="video/mp4">
 </video>

JS

VideoEl.addEventListener('loadedmetadata', VideoMetaDataLoaded);

function VideoMetaDataLoaded() {
  VideoEl.currentTime = newTime;
}