HTML5视频:停滞不前的事件

时间:2015-01-23 08:39:28

标签: javascript google-chrome html5-video

我正在谷歌Chrome上使用HTML5视频标签编写视频播放器:我需要显示一些视频(1),然后将其从DOM文档中删除以显示其他视频,然后再创建一些指向同一视频的视频标签文件比(1)。

我注意到有时视频没有显示我第二次加载它们,而是“停顿”事件被触发......我应该做些什么来处理此事件并能够显示视频?如果我保留对第一个视频标记的引用,那么稍后重用它就可以了,但保留对每个视频标记的引用可能非常耗费内存!

1 个答案:

答案 0 :(得分:5)

如果您的浏览器一次尝试加载的视频超过两三个,那么其中一些视频将停止播放。尽管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,它都可以正常工作。