html5 视频在设置 currentTime 后等待 readystate == 4

Posted 2023-05-07

【中文标题】html5 视频在设置 currentTime 后等待 readystate == 4

【英文标题】：html5 video wait for readystate == 4 after setting currentTime

【发布时间】：2014-03-09 03:12:09

【问题描述】：

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

因为我要抓取没有播放过的图片，所以我设置了

video.currentTime = y;

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

我尝试循环直到readyState == 4

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

但这最终会陷入无限循环。

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

谢谢

【问题讨论】：

见：***.com/questions/13864795/…

我的问题是，如果我调用 video.load()，我会收到消息“未捕获的 InvalidStateError：尝试使用不可用或不再可用的对象。”在我调用video.currentTime = y; 的那一行，其中提到的方法作为第二个条目。 load() 会破坏视频元素吗？或者为什么我会收到此错误？

【参考方案1】：

好的，我用事件监听器 seeked 解决了它。

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

感谢您的帮助。

【参考方案2】：

查看http://www.w3.org/2010/05/video/mediaevents.html 以了解要监听的相关事件。尝试监听“loadedmetadata”事件，而不是在 load() 之后立即设置 currentTime，因为这表明视频的所有持续时间/时间信息都已加载（“canplay”也可以）。

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

【参考方案3】：

对媒体使用“canplay”。根据 MDN 网络文档，媒体事件“canplay”对应于 HAVE_ENOUGH_DATA 就绪状态，即 readyState 4。

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