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

Question

我正在开发一个实时媒体浏览/播放应用程序，该应用程序在可用时在浏览器中使用 <video> 对象进行播放。

我混合使用了直接的 javascript 和 jQuery，

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

我已经尝试了以下相同的结果：

1 - 清空包含创建元素的父容器，例如：

 $(container_selector).empty();

2 - 暂停并删除匹配“视频”的子项，然后清空父容器：

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

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

原文由 sparkey0 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

这将重置一切，无声无息！

编辑：以下是标准中推荐的完整详细信息： https ://html.spec.whatwg.org/multipage/media.html#best-practices-for-authors-using-media-elements

希望它能解决您的疑问。

原文由 toon lite 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 关键字只是为了从对象中删除属性（正如其他人在评论中指出的那样）。在上面的 delete this 行之前和之后将 this 记录到控制台，每次都显示相同的结果。 delete this 应该什么都不做，也没有什么区别。然而，这个答案继续收到少量选票，人们报告说，省略 delete this 会使它停止工作。也许有些浏览器 JS 引擎的实现 delete ，或者浏览器的 delete 和 jQuery 正在做什么 this d4f5c6cac78d8ece320-a24 之间的不寻常交互

所以，请注意，如果这个答案解决了您的问题，如果它确实有效，则不清楚为什么会这样，并且很可能由于多种原因而停止工作。

原文由 Ken Redler 发布，翻译遵循 CC BY-SA 3.0 许可协议