コンテクスト
jQueryUIダイアログボックスへのリンクがたくさん含まれているページがあります。このダイアログボックスにはvideo.jsプレーヤーが含まれています。
問題
これらのリンクの1つを初めてクリックすると、すべてが完全に機能します。
問題が発生するのは、それ以降をクリックしたときです。すべてのIDを一意にすることで、2番目の異なるビデオを開く際の問題を修正しました。
ただし、これは同じビデオをもう一度開くのに役立たないようです。そのため、これらのプレーヤーのIDを一意にしました（ビデオのハッシュと。の両方をid含めるためのプロパティを以下に示します。<video>rand
定義された問題
ダイアログボックスを閉じると、ブラウザは引き続きビデオソースをダウンロードしていることがわかります。これは、後続のダイアログを開くと、ダウンロードなどのビデオがさらに作成されることを意味します。
質問
- ビデオのダウンロードを停止するにはどうすればよいですか？
- 私がやっていることよりも、再初期化するためのより良い方法はありますか？
- 誰かが閉じるボタンを押したときにビデオを強制終了するより良い方法はありますか？
コード
jQueryUIダイアログウィンドウには次のHTMLが読み込まれます
<video id="<?php echo $viLibraryItem->getHash().rand() ?>" class="video-js vjs-default-skin" width="320" height="240"
controls="controls" preload="auto" data-setup="{}"
poster="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>">
<source src="<?php echo $viLibraryItem->getFullWebPath() ?>" type="video/mp4"></source>
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
data="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>">
<param name="movie" value="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["<?php echo viLibraryItem::getWebPath() ?>/<?php echo $viLibraryItem->getFilename() ?>", {"url": "<?php echo _compute_public_path($viLibraryItem->getFilename(), viLibraryItem::getWebPath(), 'swf')?>","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>" width="320" height="240" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
ダイアログボックスのJavascript
video_play_click_event: function(event) {
$.loading();
$('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
$.loading();
$this = $(this);
$this.dialog({
width: 320,
height: 400,
modal: true,
buttons: {
Close: function() {
$(this).dialog( "destroy" );
},
},
open: function(event, ui) {
id = $(this).find('.video-js:first').attr('id');
_V_(id);
$(this).css({overflow: 'hidden', padding: '0'});
},
beforeClose: function() {
$('.video-js').player().pause();
$('.video-js').remove();
}
});
});
return false;
}