Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

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?

like image 554
sparkey0 Avatar asked Jul 15 '10 18:07

sparkey0


People also ask

How to destroy a video element in JavaScript?

To properly unload or destroy an HTML element with JavaScript, we can pause the video, then remove the src attribute from the video element, and then call load again to reload the video element.

How do I hide video elements?

To hide a video on a web page, use yourVariableName. style. display='none'.


1 Answers

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.

like image 174
toon lite Avatar answered Oct 18 '22 18:10

toon lite