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','')

它停止视频,我相信它可以节省内存