HTML5 Video - Load and unload video tag with jQuery
To reset the video to Blank without removing it
$("#video-intro").first().attr('src','')
It stops the video and I believe it saves the memory
INVASORIA
Updated on June 04, 2022Comments
-
INVASORIA almost 2 years
I'm developing a website with a big slider that uses 100% width and height slides. I'm using some videos as backgrounds inside a couple of slides. While I've tried many plugins, some worked erratically with jScrollPane so I ended up using "simpleVideo jQuery plugin" (https://github.com/markupboy/simpleVideo).
The plugin uses the video tag to play everything. I'm including a video tag inside every page, like this:
<div class="rsImg page" id="page1"> <video poster="video/poster.png" id="video-intro"> <source src="video/trailer_480p.ogg" type="video/ogg"> <source src="video/video.mp4" type="video/mp4"> </video> </div> <!-- END OF PAGE 1-->
Video plays and behaves correctly, it's nice.
But as I add more slides, I'm getting worried about memory usage and slowness in the whole experience.
I have a function that listens for a "SlideChange" event, so destroying the video wouldn't be much of a problem once the slide changes, like this:
poshSlider.ev.on('rsAfterSlideChange', function() { if(poshSlider.currSlideId+1!=1) { $('#video-intro').trigger('stop'); $('video').empty().remove(); } else { $('#page1').append('<video poster="video/poster.png" id="video-intro"><source src="video/video.mp4" type="video/ogg"><source src="video/video.mp4" type="video/mp4"></video>'); $('#video-intro').simpleVideo(); $('#video-intro').trigger('play'); } });
So I've tried with emptying and removing the whole div, video tag and such. Then, to reinitialize the video I thought of appending the same code in the same place, but it doesn't work as expected and I don't know if it's a good way when it comes to taking care of memory leaks.
What would be a way of loading and unloading videos considering my approach?
EDIT:
I was using "append" instead of "html". My code now works like this, I just need to look after memory increases and some kind of garbage collection. Any advice?
poshSlider.ev.on('rsAfterSlideChange', function() { if(poshSlider.currSlideId+1!=1) { $('#video-intro').trigger('stop'); $('video').empty().remove(); } else { $('#page1').html('<video poster="video/poster.png" id="video-intro"><source src="video/trailer_480p.ogg" type="video/ogg"><source src="video/video.mp4" type="video/mp4"></video>'); $('#video-intro').simpleVideo(); $('#video-intro').trigger('play'); } });
-
INVASORIA over 11 yearsWell, it seems I was using the wrong jQuery method, append() instead of html(). After playing with the code a little, I managed to load and unload all video tags and specifically add it back for the current slide. Code in question edited.
-