如何正确卸载/销毁 VIDEO 元素 [英] How to properly unload/destroy a VIDEO element

问题描述

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

I'm working on a realtime media browsing/playback application that uses <video> objects in the browser for playback, when available.

我混合使用了 javascript 和 jQuery，

I'm using a mix of straight javascript, and jQuery,

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

My concern is specifically with memory. The application never reloads in the window, and the user can watch many videos, so memory management becomes a large concern over time. In testing today, I see the memory profile jumping by the size of the video to be streamed with each subsequent load, and never dropping back down to the baseline.

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

I've tried the following things with the same result:

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

1 - Empty the parent container containing the created element, eg:

$(container_selector).empty();

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

2 - Pause and remove children matching 'video', and then empty the parent container:

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

有没有其他人遇到过这个问题，有没有更好的方法来解决这个问题?

Has anyone else run into this issue, and is there a better way to do this?

推荐答案

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

It is very tricky to dispose video from the DOM structure. It may lead to browser crashing. Here is the solution that helped me in my project.

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

这将重置一切，无错误无提示！

this will reset everything, silent without errors !

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

Here are the full details as recommended in the Standard: https://html.spec.whatwg.org/multipage/media.html#best-practices-for-authors-using-media-elements

希望它能解决您的疑问.

Hope it resolve your query.

这篇关于如何正确卸载/销毁 VIDEO 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！