html5 视频在设置当前时间后等待就绪状态 == 4

Question

我正在尝试抓取一些未播放的视频图像。因此，我使用HTML5

。

因为我想抓取尚未播放的图像，所以我设置

video.currentTime = y;

如果我现在调用 grap 函数，它将不起作用。因为video.readyState是 1（而不是 4）。如果我在抓取功能的开头添加一个alert();它就可以工作。

我试图循环直到readyState == 4

while(true){
   if(video.readyState == 4){
       grapImage();
   }
}

但这最终陷入了无休止的循环。

那我怎么能等到readyState == 4呢？

谢谢

Answer 1

好的，

我用事件侦听器解决了它seeked.

如果您更改当前时间，它将更改为seeking完成后它将变为 seeked .loadedmetadata事件也是一种选择，但seeked是最快的事件。

感谢您的帮助。

Answer 2

查看 http://www.w3.org/2010/05/video/mediaevents.html 以获取要侦听的相关事件。 尝试收听"loadedmetadata"事件，而不是在 load（） 之后立即设置 currentTime，因为这表示所有持续时间/计时信息都已加载到视频中（"canplay"也有效）。

video.addEventListener('loadedmetadata', function () { console.log('video duration information available'); });

Answer 3

使用"canplay"表示媒体。根据 MDN 网络文档，媒体事件"canplay"对应于 readyState HAVE_ENOUGH_DATA，即 readyState 4。

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events