我正在开发一个包含大型滑块的网站,使用100%宽度和高度的幻灯片。在其中的几个幻灯片内部,我使用了一些视频作为背景。虽然我尝试了许多插件,但有些与jScrollPane不兼容,所以最终选择了"simpleVideo jQuery plugin" (https://github.com/markupboy/simpleVideo)。
该插件使用video标签播放所有内容。我在每个页面中都包含了一个video标签,像这样:
所以我尝试使用清空和删除整个div、视频标签等方法。然后,为了重新初始化视频,我想在同一位置追加相同的代码,但它并没有按预期工作,而且我不知道在处理内存泄漏时是否是一个好方法。
在我的方法中,加载和卸载视频的方式是什么?
编辑:
我使用的是“附加”而不是“html”。我的代码现在像这样工作,我只需要注意内存增加和某种垃圾收集。有什么建议吗?
该插件使用video标签播放所有内容。我在每个页面中都包含了一个video标签,像这样:
<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');
}
});