HTML5 视频：停滞的事件

Question

我正在 Google 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，它应该都能正常工作。