HTML5视频：停滞不前的事件

Question

我正在谷歌Chrome上使用HTML5视频标签编写视频播放器：我需要显示一些视频（1），然后从DOM文档中删除它们以显示其他视频，然后再创建一些指向相同文件的视频标签（ 1）。

我注意到有时视频没有显示我第二次加载它们，而是“停顿”事件被触发......我该怎么办才能处理这个事件并能够显示视频？ 如果我保留对第一个视频标记的引用，那么稍后重用它就可以了，但保留对每个视频标记的引用可能会非常耗费内存！

Answer 1

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

删除旧视频并在以后再次加载它们是正确的方法，但您需要非常彻底地了解它以使浏览器停止尝试加载它们。 这是你需要做的。

// 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 ，它都可以正常工作。