jQueryのモーダルウィンドウプラグインColorbox を利用しているサイトの改修でmp4の動画再生を追加した際に、モーダルウィンドウを開くと同時に再生&閉じると同時に停止をするのに苦心したのでそのメモです。
目次
コールバックを使ってplayやpauseを走らせる
今回は1つのページに複数動画があったので、リンクのhashを見てその要素の中にあるvideoタグに対して、playとpauseをかけるようにしてみました。
<a href="#video_01" class="inline-modal">動画1</a>
<a href="#video_02" class="inline-modal">動画2</a>
<!--インラインビデオ1-->
<div style='display:none'>
<div id='video_01'>
<video wwidth="640" height="480" controls preload playsinline>
<source src="video_01.mp4" type="video/mp4">
</video>
</div>
</div>
<!--インラインビデオ2-->
<div style='display:none'>
<div id='video_02'>
<video wwidth="640" height="480" controls preload playsinline>
<source src="video_02.mp4" type="video/mp4">
</video>
</div>
</div>
$(".inline-modal").colorbox({
inline:true,
onOpen: function(){
$(this.hash).find("video").get(0).play();
},
onCleanup: function(){
$(this.hash).find("video").get(0).pause();
}
});
以上が、モーダルウィンドウを開いたときに動画を再生、閉じた時には動画を一時停止するコードです。
コメント