bxSliderに入れたvideoタグをスライドに合わせて再生したい

bxSliderでスライダーを作るとき、画像と動画を混在させたいことがあります
そういった場合、動画はそのスライドが表示されたときに再生を開始させたいですし、ループで再表示されたときは頭出しをして最初からリスタートしたいです
bxSliderにはスライドの状態変化に合わせた各種関数が用意されています。これを活用することでスライドに合わせた動画の制御が可能になります

動作イメージ

サンプルコード

html

<ul class="video_slider">
    <li>
        <video src="movie.mp4" poster="poster.jpg" autoplay muted loop playsinline></video>
    </li>
    <li>
        <video src="movie.mp4" poster="poster.jpg" muted loop playsinline></video>
    </li>
    <li>
        <video src="movie.mp4" poster="poster.jpg" muted loop playsinline></video>
    </li>
</ul>

一枚目のスライドに動画を配置する場合は「autoplay」属性をつけておきます

CSS

.bx-wrapper {
    margin: 0px auto;
    width: 900px;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.bx-wrapper video {
    width: 100%;
    height: 100%;
}

動画の制御とは直接関係ないですが、スライドを中央表示したり、枠線を消したりしています

jQuery

jQuery(function($) {
    $('.video_slider').bxSlider({
        auto: true,
        pager: false,
        controls: false,
        infiniteLoop: true,
        onSlideBefore: function($slideElement, oldIndex, newIndex) {
            const videos = $slideElement.parent().find('video');
            videos.each(function(index, element) {
                $(element).get(0).pause();
                $(element).get(0).currentTime = 0;
            });
        },
        onSlideAfter: function($slideElement, oldIndex, newIndex) {
            const video = $slideElement.find('video');
            if(video.length) {
                video.get(0).play();
            }
        },
    });
});

スライダーに各種パラメーターを設定して、初期化と動画の制御処理の設定を行います。詳細は後述

サンプルコードの解説

スライドする前に処理

onSlideBefore: function($slideElement, oldIndex, newIndex) {
    const videos = $slideElement.parent().find('video');
    videos.each(function(index, element) {
        $(element).get(0).pause();
        $(element).get(0).currentTime = 0;
    });
},

スライドする直前に呼ばれる処理です
bxSlider初期化時のパラメーター「onSlideBefore」に関数を設定することで、指定した処理が実行できます
処理の中では、スライダーの中にあるすべての「video」タグに対して以下の処理を行っています
- 「pause」関数で再生を停止
- 「currentTime」に「0」を設定して再生位置を初期化
「infiniteLoop」で無限ループを有効にしている場合、スライドの最初と最後に「bx-clone」というクラスがついたダミーのスライドが生成されます
このダミーに対しても処理を行わないと、最後のスライドから最初のスライドにループしたときに動画がガタついて表示されてしまいます
サンプルコードでは「bx-clone」かどうかなどの判定は省略して、スライダー内すべての動画に対して逐次処理を行っています
eachループで要素を取り扱う際は、「$()」で囲んでから各種メソッドを呼ぶようにします

スライドしたあとの処理

onSlideAfter: function($slideElement, oldIndex, newIndex) {
    const video = $slideElement.find('video');
    if(video.length) {
        video.get(0).play();
    }
},

スライドした直後に呼ばれる処理です
bxSlider初期化時のパラメーター「onSlideAfter」に関数を設定することで、指定した処理が実行できます
関数の引数として渡される「$slideElement」に、現在表示しているスライドが格納されています
そこから「video」タグを取り出し、「video」タグが存在しているなら「play」関数で再生を始めます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。