4

我正在开发一个带有大滑块的网站，该滑块使用 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');
}
});
4

1 回答 1

6

将视频重置为空白而不将其删除

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

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

于 2014-03-04T02:48:50.803 回答