Question

我正在开发一个带有大滑块的网站，该滑块使用100％宽度和高度的幻灯片。我在一些幻灯片中使用了一些视频作为背景。虽然我尝试过很多插件，但有些插件与jScrollPane不一致，所以我最终使用了＆＃34; simpleVideo jQuery插件＆＃34; （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-->

视频播放和行为正常，很不错。

但是当我添加更多幻灯片时，我会担心内存使用情况和整个体验的缓慢。

我有一个能够侦听＆＃34; SlideChange＆＃34;事件，因此一旦幻灯片发生变化，销毁视频就不会有什么问题，例如：

  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，视频标签等。然后，重新初始化视频，我想在相同的地方添加相同的代码，但它没有按预期工作，我不知道它是否是一个很好的方式来照顾内存泄漏。

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

修改

我正在使用＆＃34;追加＆＃34;而不是＆＃34; html＆＃34;。我的代码现在就像这样工作，我只需要关注内存增加和某种垃圾收集。有什么建议吗？

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

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

HTML5视频 - 使用jQuery加载和卸载视频标记

1 个答案: