HTML 视频的状态在一段时间后变为待处理

HTML Video's status becomes pending after some times

我有一个 HTML 页面,其中包含一个 div,其中包含一个 HTMLVideo element, 10 秒后,我删除了视频和所有附加的事件,

删除视频时,我在视频元素上使用了 jQuery .remove()。 移除视频后,div元素显然没有子节点。

几秒钟后(大约 5 秒),我通过创建视频元素和所有源再次启动视频,然后将其附加到相同的 div。这是一个循环。

这将工作大约 5-10 分钟。在那之后,我注意到视频不再播放了。我检查了开发者工具中的 DOM Element,视频中有正确的 url

当我查看 "Network" 选项卡时,它仍在请求视频。视频播放时,状态为 "GET",响应为 "206 partial content"。然而,当它不再播放时,它只响应 "(pending)",当我直接在新标签页中访问视频 url 时,如果没有失败,加载视频需要一些时间。但是,如果我在其他浏览器 (IE/FF) 中访问它,视频 URL 将立即加载视频。

我用 Google Chrome 换 Windows

我不知道这里发生了什么,但我认为这是一个 Chrome 问题?有人可以帮助我吗?

我怀疑这是因为您删除的视频元素仍在内存中并正在尝试下载。一旦视频不再附加到 DOM,浏览器就不会停止缓冲甚至播放视频,因为您稍后可能会再次附加它或将其用于其他用途,例如 canvas 或网络音频 API。 Chrome 在开始阻止新流之前只能同时下载这么多流。

要真正摆脱旧视频元素,您需要将 src 设置为空字符串,然后调用 .load()。这将强制浏览器停止缓冲该元素,然后您就可以真正完成它了。

或者,您可以重新使用相同的视频元素并在下次循环时在其上设置新的 src(或 source 子元素)。只要记住在更改 src.

时在视频元素上调用 .load()

理论上,浏览器可以决定停止缓冲未播放且在内存中没有对它的引用的视频元素,只是将其垃圾回收。但是没有看到你的代码,我不能说你周围是否有任何杂散的引用。而且 Chrome 有时对这种事情很奇怪。