【Swiper】スライド切り替え時に動画を自動で再生・一時停止するスライダーの作り方

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperでスライドを切り替えた際に動画を自動で再生・一時停止するスライダーの作り方をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

本記事で実現したいこと

実現したい内容はとてもシンプルです。下記の3つの要件をクリアするスライダーです。

• 前へ・次へでスライドを切り替える
• スライドを切り替えたときに一度全ての動画を一時停止する
• 切り替えた先のスライドに動画がある場合は再生する

確認用にデモを用意しました。実装したいスライダーの内容と類似しているかご確認ください。前提としてautoplayとloopは使用しないため、その点ご了承いただければと思います。

DEMO

See the Pen Swiper｜Play Pause Video by ryohei (@intotheprogram) on CodePen.

問題ないようであれば、実際にスライダーを作成していきましょう。

Swiper本体を読み込む

まずはSwiper本体をダウンロードします。公式サイトからダウンロードする、もしくは開発者の方から提供されている下記のCNDを読み込んでご使用いただければと思います。

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

以上で事前準備は完了です。続いてHTMLでスライダーのレイアウトを作成していきます。

動画を持つスライダーを作成する

HTMLでSwiperを設置します。

今回、動画の再生・一時停止を確認するために全てのスライドに動画を設置します。動画素材は実際に使用されるものをご利用ください。

下記は「video」タグに「src」だけを指定した簡単なサンプルです。動画の容量が大きい場合は「preload」属性の値を「none」にしておくと良いかもしれませんね。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video src="video01.mp4"></video>
        </div>
        <div class="swiper-slide">
          <video src="video02.mp4"></video>
        </div>
        <div class="swiper-slide">
          <video src="video03.mp4"></video>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

続いて設置したスライダーに簡単なスタイルを定義します。

スライダーのスタイルを定義する

スタイルを定義する、といっても基本的なスタイルはSwiperのライブラリファイルで定義されています。なので必要な箇所だけ上書きする形でスタイルを定義します。

SCSS

.swiper-container {
    width: 100%;
    height: 100vh;
    
    .swiper-wrapper {
      
        .swiper-slide {
        
            video {
                width: 100%;
                height: 100%;
            }
        }
    }
}

本記事ではスライドをビューポートの高さいっぱいに表示するようにスタイルを定義しています。この辺は環境に合わせて調整していただければと思います。

以上で上書きは完了となります。最後にスクリプトを作成してスライダーを初期化し、動作するようにしていきます。

スライド切り替え時に動画を自動で再生・一時停止するスクリプトを作成する

スクリプトが思ったよりも長くなってしまったので、処理内容はコメントの方に記載させていただきました。directionとloopについてはデフォルトの値なので指定する必要はないかもしれないですが、念のため指定しています。

JS

var mySwiper = new Swiper ('.swiper-container', {

  direction: 'horizontal',
  loop: false,

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  on: {
    //スライダー遷移時（ドキュメント内の全動画を一時停止にする）
    transitionStart: function(){
      
      var videos = document.querySelectorAll('video');

      Array.prototype.forEach.call(videos, function(video){
        video.pause();
      });
    },
    //スライダー遷移完了後（アクティブスライドの動画を再生する）
    transitionEnd: function(){
      
      var activeIndex = this.activeIndex;
      var activeSlide = document.getElementsByClassName('swiper-slide')[activeIndex];
      var activeSlideVideo = activeSlide.getElementsByTagName('video')[0];
      activeSlideVideo.play();
    
    },
  }
})

ここまでご紹介してきた内容を反映すると、冒頭でご紹介したデモのような動きをするスライダーが完成します。スライドを切り替えた際に動画が自動で再生・一時停止が実現できているかと思います。

最後に

「Swiper」は公式のドキュメントが充実しており、ドキュメントに目を通すだけでも必要な機能が実現できるようになります。

本記事を作成するにあたって、下記のドキュメントを参考にさせていただきました。

Swiper API | Events
MDN | Video

インターネットでキーワードを入力するだけでほしい情報が手に入る……本当に良い時代ですね。私も皆様に良質な情報が提供できるように自己研鑽を怠らないように励みます！

以上、Swiperでスライド切り替え時に動画を自動で再生・一時停止するスライダーの作り方のご紹介でした！