如何正确卸载/销毁VIDEO元素

Question

我正在开发一个实时媒体浏览/回放应用程序,它使用<video>浏览器中的对象进行回放(如果可用).

我正在使用直接javascript和jQuery的混合,

我关心的是记忆.应用程序永远不会在窗口中重新加载,并且用户可以观看许多视频,因此随着时间的推移,内存管理成为一个大问题.在今天的测试中,我看到内存配置文件按照每个后续加载流式传输的视频大小跳跃,并且永远不会回落到基线.

我尝试了以下相同的结果:

1 - 清空包含已创建元素的父容器,例如:

$(container_selector).empty();

2 - 暂停并删除匹配"视频"的子项,然后清空父容器:

$(container_selector).children().filter("video").each(function(){
    this.pause();
    $(this).remove();
});
$(container_selector).empty();

有没有其他人遇到这个问题,有没有更好的方法来做到这一点？

Answer 1

从DOM结构中处理视频非常棘手.它可能会导致浏览器崩溃.这是帮助我完成项目的解决方案.

var videoElement = document.getElementById('id_of_the_video_element_here');
videoElement.pause();
videoElement.removeAttribute('src'); // empty source
videoElement.load();

这会重置一切,保持沉默,没有错误!

以下是完整的细节和更好的解释http://www.attuts.com/aw-snap-solution-video-tag-dispose-method/

希望它能解决您的疑问.

Answer 2

据报道,这种"解决方案"可以正常工作,大概是因为它会使这些视频容器对象可用于垃圾收集(请参阅下面的说明,讨论为什么delete不应该有所作为).在任何情况下,您的结果可能会因浏览器而异:

$(container_selector).children().filter("video").each(function(){
    this.pause(); // can't hurt
    delete this; // @sparkey reports that this did the trick (even though it makes no sense!)
    $(this).remove(); // this is probably what actually does the trick
});
$(container_selector).empty();

注意:毫无疑问,delete指定关键字只是为了从对象中删除属性(正如其他人在评论中指出的那样).this在delete this上面的行之前和之后记录到控制台,每次都显示相同的结果.delete this应该什么都不做,没有任何区别.然而,这个答案继续获得涓涓细流的投票,人们已经报告说,省略delete this使其停止工作.也许某些浏览器JS引擎的实现方式delete很奇怪,或浏览器delete与jQuery正在做什么之间的异常交互this.

所以,请注意,如果这个答案解决了你的问题,那么如果它确实有效,那么就不清楚为什么会出现这种情况,而且出于各种原因它也可能停止工作.

Answer 3

将视频重置为空白而不删除它

$("#video-intro").first().attr('src','')

它停止了视频

Answer 4

delete(this); 

是不是一个解决方案。如果它适用于 x 或 y，则是浏览器的不当行为。在这里阅读：

delete 运算符从对象中删除属性。

事实是，当自动播放属性打开时，某些浏览器（例如 Firefox）会将视频缓冲区缓存在内存中。处理起来很痛苦。

从 DOM 中移除 video 标签或暂停它只会产生不稳定的结果。您必须卸载缓冲区。

var video = document.getElementById('video-id');
video.src = "";

我的实验表明它是这样做的，但不幸的是，这是规范未完全指定的浏览器实现。您不需要在 src 更改后调用 load() 。更改视频标签的 src 时，您会在其上隐式调用 load()，W3C 规范中对此进行了说明。