Blog スタッフブログ

jQuery「Colorbox」で動画再生を制御する方法

コーダーのKです。

モーダルウィンドウ内のvideoを再生すると、モーダルウィンドウを閉じた後も再生が止まらない現象が起きます。

それを解決するColorboxとvideoタグを使用して、モーダルウィンドウを開くと再生・閉じると停止させる方法をご紹介します。

HTML側の準備

モーダルウィンドウの表示の仕方はインラインを使います。

サンプル

<a class="btn" href="#video">
クリックでモーダルウィンドウを開く
</a>

<div id="video">
    <video controls>
        <source src="video.mp4" type="video/mp4">
    </video>
</div>

#videoをもつaタグをクリックすると同じIDをもつdivが開くようにします。

JS側の準備

HTMLにColorboxを適応するためにオプションを記述します。

//実行 
$('.btn').colorbox({
    //デザインに応じていくつで表示するか変更
    width: "80%", //横幅
    maxWidth: "80%",　//最大横幅
    maxHeight: "80%",　//最大高さ
    inline: true,　//インラインで開く

    //モーダルを閉じた時に再生停止
    onOpen: function() {
        $(this.hash).find("video").get(0).play();
    },
    onCleanup: function() {
        $(this.hash).find("video").get(0).pause();
    }
});

この部分によってモーダルウィンドウを開いた時にvideoが再生されます。

$(this.hash).find("video").get(0).play();

この部分によってモーダルウィンドウを開いた時にvideoが停止されます。

$(this.hash).find("video").get(0).pause();

Colorboxは閉じるボタンの他に領域外をクリックしても閉じるようになっていますが、領域外にも対応しています。

戻る一覧へ戻る