How to properly unload/destroy a VIDEO element

Issue

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

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 - Empty the parent container containing the created element, eg:

$(container_selector).empty();

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?

Solution

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 !

Edit: 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.

Answered By - toon lite