JavaScript Free memory of HTMLVideoElement

[hebrerillo]

Hello there!

I have a page with a lot of videos, so memory is a concern. Because of that, I have implemented an Intersection Observer that removes the videos that are out of the viewport. This is the instruction:

video.remove();

Where 'video' is an HTMLVideoElement.

Will that instruction be enough to free the memory of the video?? or do I have to do something else?

I read this thread, but it is still not clear to me if the memory of the video is completely freed.

Thank you a lot!

 

[cbreemer]

Interesting question. In the MDN documentation of HTMLVideoElement I don't see that it has a remove() method. What am I missing ? Or is that a jQuery thingy ?

And what thread is that you have been reading ?

In this thread https://stackoverflow.com/questions/3258587/how-to-properly-unload-destroy-a-video-element it is suggested that video.removeAttribute('src'); might help.

 

[hebrerillo]

Interesting question. In the MDN documentation of HTMLVideoElement I don't see that it has a remove() method. What am I missing ? Or is that a jQuery thingy ?

And what thread is that you have been reading ?

In this thread https://stackoverflow.com/questions/3258587/how-to-properly-unload-destroy-a-video-element it is suggested that video.removeAttribute('src'); might help.

Hello, and thanks for your reply!

The 'remove' method is inherited from Element, so it is available also in HTMLVideoElement.

I also read the thread you mentioned, but I was not sure if the memory would be freed just by setting the src to "". But it seems so.

Also, my approach would work as I have checked the memory consumed and after removing the video, the memory consumed drops down.

So thanks for your help!

 

[hebrerillo]

Is there anyway I can mark this thread as solved?

 

[cbreemer]

The 'remove' method is inherited from Element, so it is available also in HTMLVideoElement.

Ah yes of course. This would indeed remove the element from the DOM, but probably not from memory.

I also read the thread you mentioned, but I was not sure if the memory would be freed just by setting the src to "". But it seems so.

It seems a strange design to me that this is the way to unload a video. I feel there should have been a method for that. But ok, as long as it works.

So thanks for your help!

My pleasure.

 

[hebrerillo]

Ah yes of course. This would indeed remove the element from the DOM, but probably not from memory.

Then, how can I check if the memory of the video was freed?

 

[cbreemer]

Then, how can I check if the memory of the video was freed?

Maybe I misunderstood, but I thought you wrote you had already checked that after setting src="" ?

Anyway you can see the Javascript VM's memory footprint in the Memory tab of the debugger. Whether you see effect immediately after executing a specific statement is not at all sure though, as the VM uses a garbage collector and clears up stuff on its own terms.

 

[hebrerillo]

Maybe I misunderstood, but I thought you wrote you had already checked that after setting src="" ?

Anyway you can see the Javascript VM's memory footprint in the Memory tab of the debugger. Whether you see effect immediately after executing a specific statement is not at all sure though, as the VM uses a garbage collector and clears up stuff on its own terms.

Hello! And sorry for the late response.

You were right, removing the video via 'video.remove()' won't free the memory of the video. I checked in the network panel that when the video is inserted back again, the actual video is not requested again to the server, and it is played again with no problem.

However, setting the video src to "", and then setting it back to to "myvideo.mp4", will cause another request to the server to get the video.

So thank you so much!!

 

[cbreemer]

Thanks for the update. One could indeed assume that when a new request for the video URL is done, it had been removed from memory. Although this might not be conclusive proof, and just be a matter of file caching.