bxSliderで動画再生終了後にスライドショーを始める

• Web Create
• 2016.10.13

ミッション、videoタグの再生終了後にスライド

bxSliderはレスポンシブ対応のスライダーです。
トライムでも使い勝手がよいので、よく利用します。

一枚目が動画で再生終了後にスライドが始まるという、
少し難しいご要望がありましたので、
bxSliderのコールバックを利用して実現してみました。

ループして一枚目に戻ると、また動画の再生が始まります。

動作デモ

実際の動作をご確認ください。

※下のボックスにマウスオーバーすると「RERUN」というボタンが右下に出ます。
最初から確認したい場合はそちらをクリックして下さい。

See the Pen yaEzox by leo (@leo-trym) on CodePen.

ソース

HTML

<ul class="bxslider">
  <li><video id="video" src="video.mp4"></video></li>
  <li><img src="img_01.jpg" alt=""></li>
  <li><img src="img_02.jpg" alt=""></li>
</ul>

JS

$(function() {

  var $video = $('#video').get(0);

  $slider = $('.bxslider').bxSlider({
    infiniteLoop: true,
    onSliderLoad : function() {
      $video.play();
    },
    onSlideAfter: function($slideElement, oldIndex, newIndex) {
      if ( newIndex == 0 ){
        $video.play();
      } else {
        $video.pause();
        $video.currentTime = 0;
        $slider.startAuto();
      }
    }
  });

  $video.addEventListener("play", function() {
    $slider.stopAuto();
  });

  $video.addEventListener("ended", function() {
    $slider.goToNextSlide();
  });
});

onSliderLoad と onSlideAfter というコールバックを利用してます。
onSliderLoad で bxSlider 読み込み完了後に動画を再生します。

onSlideAfter では現在のスライドが何枚目なのかを取得し、
1枚目の場合、動画を再生、それ以外では動画を停止し再生位置を0に戻します。

21行目では動画の再生中はスライドしないように、
スライダーのautoplayを停止しています。

25行目では動画再生終了後に、次のスライドに移動するようにしています。

まとめ

最近はほかにも便利なスライダーのプラグインがあり、
目新しさはなくなってきたbxSliderですが、
社内ではみんなが使い慣れているので、利用頻度が高いプラグインです。

今回のような自動再生の動画と組み合わせたのは初めてでしたが、
便利なコールバックが用意されているので、実現することが出来ました。