私は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」の代わりに「append」を使用していました。私のコードはこのように機能するようになりました。メモリの増加とある種のガベージコレクションの世話をする必要があります。何かアドバイス？
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');
}
});