javascript - HTML5 视频 : stalled event

标签 javascript google-chrome html5-video

我正在 Google Chrome 上使用 HTML5 视频标签编写视频播放器:我需要显示一些视频 (1),然后将它们从 DOM 文档中删除以显示其他视频,稍后再次创建一些指向相同视频标签的视频标签文件比 (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,它都应该可以正常工作。

关于javascript - HTML5 视频 : stalled event,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28105950/

相关文章:

javascript - innerHtml 不适用于 Div

javascript - 如何使用 Javascript 通过选项的值来选择选择框中的选项?

javascript - 带有父窗口通知的弹出窗口

javascript - 访问 JavaScript 数组值

jQuery Keydown 事件在 Chrome 中不起作用

google-chrome - 使用 --disable-web-security 创建 Google Chrome 快捷方式

google-chrome - 尝试从本地加载 tensorflowJS 模型时出错,Fetch API 无法加载下载 ://model. URL scheme must be "https"for CORS request error

javascript - 使用 .play() 按回车键播放/暂停视频

javascript - 在javascript中获取视频的帧率

html5-video - WebRTC 多个视频流在同一个 peerConnection