CODEWITHSUNDEEP
jqueryhtmlvideohtml5-video
INVASORIA
INVASORIA

Reputation: 80

HTML5 Video - Load and unload video tag with jQuery

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');
}
});

Upvotes: 4

Views: 12701

Answers (1)

Bishoy Hanna
Bishoy Hanna

Reputation: 4589

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

Upvotes: 6

Related Questions