title: HTML5 Video - Load and unload video tag with jQuery
body: <p>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" (<a href="https://github.com/markupboy/simpleVideo" rel="nofollow">https://github.com/markupboy/simpleVideo</a>).</p>
  
  <p>The plugin uses the video tag to play everything. I'm including a video tag inside every page, like this:</p>
  
  <pre><code>            &lt;div class="rsImg page" id="page1"&gt;
  
                  &lt;video poster="video/poster.png" id="video-intro"&gt;
                      &lt;source src="video/trailer_480p.ogg" type="video/ogg"&gt;
                      &lt;source src="video/video.mp4" type="video/mp4"&gt;
                  &lt;/video&gt;
  
  
              &lt;/div&gt;
              &lt;!-- END OF PAGE 1--&gt;
  </code></pre>
  
  <p>Video plays and behaves correctly, it's nice.</p>
  
  <p>But as I add more slides, I'm getting worried about memory usage and slowness in the whole experience.</p>
  
  <p>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:</p>
  
  <pre><code>  poshSlider.ev.on('rsAfterSlideChange', function() {
  if(poshSlider.currSlideId+1!=1)
  {
    $('#video-intro').trigger('stop');
    $('video').empty().remove();
  } else {
    $('#page1').append('&lt;video poster="video/poster.png" id="video-intro"&gt;&lt;source src="video/video.mp4" type="video/ogg"&gt;&lt;source src="video/video.mp4" type="video/mp4"&gt;&lt;/video&gt;');
    $('#video-intro').simpleVideo();
    $('#video-intro').trigger('play');
  }
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>What would be a way of loading and unloading videos considering my approach?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>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?</p>
  
  <pre><code>   poshSlider.ev.on('rsAfterSlideChange', function() {
  if(poshSlider.currSlideId+1!=1)
  {
    $('#video-intro').trigger('stop');
    $('video').empty().remove();
  } else {
    $('#page1').html('&lt;video poster="video/poster.png" id="video-intro"&gt;&lt;source src="video/trailer_480p.ogg" type="video/ogg"&gt;&lt;source src="video/video.mp4" type="video/mp4"&gt;&lt;/video&gt;');
    $('#video-intro').simpleVideo();
    $('#video-intro').trigger('play');
  }
  });
  </code></pre>