HTML5视频 - 加载和卸载视频标签，并带有jQuery

Question

我正在开发一个带有100％宽度和高度幻灯片的大滑块的网站。我正在使用一些视频作为几个幻灯片中的背景。当我尝试了许多插件时，一些插件与JSCrollPane不正常地工作，因此我最终使用了" SimpleVideo jquery插件"（https://github.com/markupboy/simplevideo）。

插件使用视频标签播放所有内容。我在每个页面中都包含一个视频标签，例如：

            <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-->

视频播放和行为正确，很好。

但是，当我添加更多幻灯片时，我会担心整个体验中的记忆使用和缓慢。

我的功能会听" slidechange"事件，因此一旦幻灯片变化，销毁视频就不会有太大的问题，例如：

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

因此，我尝试着清空和删除整个DIV，视频标签等。然后，为了重新初始化视频，我想到在同一位置附加相同的代码，但是它不如预期，我不知道这是照顾记忆泄漏的好方法。

考虑到我的方法，什么是加载和卸载视频的方法？

编辑：

我使用的是"附加"而不是" html"。现在，我的代码可以这样工作，我只需要照顾内存增加和某种垃圾收集即可。有建议吗？

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

Answer 1

将视频重置为空白而无需删除

$("#video-intro").first().attr('src','')

它停止了视频，我相信它可以保存内存