How to properly unload/destroy a VIDEO element

Question

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

I\'m using a

Answer 1

According to this bug:

https://bugs.chromium.org/p/chromium/issues/detail?id=255456&can=2&q=255456&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

this seems to be a memory leak issue in Chrome!

Answer 2

ok, here's a simple solution which certainly works:

var bodypage = document.getElementsByTagName('body')[0];
var control_to_remove = document.getElementById('id_of_the_element_here');
bodypage.removeChild(control_to_remove);

Answer 3

Not much complicated. Just put your src to null.

Eg: document.querySelector('#yourVideo').src = null;

It will remove your video src attribute. Done.

Answer 4

I've encountered this problem on a more complicated level where we are loading ~80 videos on a page, and having problems with memory management in IE and Edge. I posted our solution on a similar question I asked specifically about our issue: https://stackoverflow.com/a/52119742/1253298

Answer 5

Here is an answer on how to close the camera - not only pausing. It is the stream that should be stopped - not the video elements reference: stream.stop()

Answer 6

My code did not use a <video> element with a src tag, but instead used multiple <source> children to set a video in multiple formats.

To properly destroy and unload this video, I had to use a combination of multiple answers on this page, which resulted in:

var videoElement = $('#my-video')
videoElement[0].pause()  // Pause video
videoElement.empty()     // Remove all <source> children
videoElement.load()      // Load the now sourceless video
delete videoElement      // The call mentioned in other answers
videoElement.remove()    // Removing the video element altogether

Hope this helps someone.