HTML5 视频：停滞事件

Question

我正在 Google Chrome 上使用 HTML5 视频标签编写视频播放器：我需要显示一些视频 (1)，然后将它们从 DOM 文件以显示其他视频，稍后再次创建一些指向与 (1) 相同文件的视频标签。

我注意到有时视频在我第二次加载时没有显示，而是触发了 'stalled' 事件...我应该怎么做才能处理此事件并能够显示视频？如果我保留对第一个视频标签的引用然后稍后重用它，它会起作用，但保留对每个视频标签的引用可能会非常耗费内存！

Answer 1

如果浏览器一次尝试加载超过两三个视频，其中一些会停止。尽管 HTML5 video 提供了一种方法来告诉它开始加载视频，但没有办法告诉它停止。一旦你第一次开始播放它，只要它在内存中，它就会继续尝试加载更多数据，以防你决定再次开始播放它。而且它一次只会加载这么多视频，所以如果你还在加载前三个视频，第四个会等待非常非常长的时间。

删除旧视频并稍后重新加载它们是正确的方法，但您需要非常彻底地使浏览器停止尝试加载它们。这是您需要做的。

// 1) Pause the video
oldVideo.pause();

// 2) Clear the video source URL
oldVideo.src = "";

// 3) Tell the video to start loading "nothing"
oldVideo.load();

最后一步很关键。即使您将 src 设置为空字符串，视频也会忽略它，直到您调用 load。如果需要，您可以将它从 DOM 和任何数据结构中删除，以便它可以完全被垃圾收集。但即使你这样做，它也不会被垃圾收集，除非你清除 src 并调用 load.

下次加载视频时，通过创建新元素或在同一元素上设置 src，它应该可以正常工作。