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

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

本記事では、SwiperでYoutube Player APIを使って動画を表示する場合に、スライド切り替え時に自動で再生・一時停止する方法をご紹介しています。

スライドを切り替えたときにYoutubeの動画が自動で再生・一時停止するようにしたいんだけど、いい方法ないかな？

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

ちなみにHTML5のVideoタグを使用した方法につきましては下記の記事で解説していますので、参照にしていただければ幸いです！

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

注意事項

本記事の内容は、Swiperのループ処理に対応していません。ループをオンにするとスライドが複製されるわけですが、Youtube IFrame Player APIの仕様なのか複製したスライドには動画が読み込まれずに表示されません。インスタンスを作成する際に要素のidを指定する必要があるので、そこがネックになっているのかもしれません。その点、予めご了承ください。

iframeで埋め込む形式にしておけばうまく表示されるかもしれないですが、まだ試していないので検証が終わったら結果を掲載したいと思います！あとコンソールに表示されるCORSエラーはどうしようもないので諦めましょう！

では注意事項はここまでにしまして、本題に戻ります。

本記事で作成するもの

本記事では下記のデモのようなスライダーを作成します。アクティブのスライドにあるYoutube動画だけが再生されるイメージです。

See the Pen Swiper ChangeSlide Youtube Autoplay by ryohei (@intotheprogram) on CodePen.

CodePen経由だと音声をミュートにしないと再生・一時停止がコントールできないのでミュートにしています。スライド1枚目の自動再生もミュート状態にしておかないとできないようです。独自ドメインであればスライド切り替え時に音声を再生させることもできますが、基本ミュートで使用することが多いと思いますので、問題ないですね。

成果物も確認いただいたところで、さっそく作り方を見ていきましょう！

とりあえずSwiperの用意

Swiperの公式サイトを参考にスライダーを設置します。CDNが用意されているので、必要なファイルは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>

必要なファイルを読み込んだらSwiperのレイアウトを作成します。すべてのスライドに動画を表示したいので、それぞれ異なるidを割り振った要素を設置します。最終的にidを割り振った要素の位置にiframeでYoutubeの動画が表示されます。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><div id="player1"></div></div>
        <div class="swiper-slide"><div id="player2"></div></div>
        <div class="swiper-slide"><div id="player3"></div></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

最後にSwiperを初期化します。ページネーションとスクロールバーは外しています。必要な方は残しておきましょう。

const swiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});

CSSも適当に…

.swiper-container {
    width: 640px;
    height: 360px;
    margin: 0 auto;
}

一先ずここまででSwiperの設置は完了です。完了と言ってもまだ何も表示されていないと思います。ですので、続いて動画が表示されるように処理を追加していきます。

Youtube IFrame Player APIで動画を読み込む

続いて動画の表示するための準備をしていきます。Youtube IFrame Player APIのリファレンスを参考に動画を読み込みます。サンプルの動画はGoogleのものを使用させてもらっています。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var yt = [];
function onYouTubeIframeAPIReady() {
    
    let w = '100%';
    let h = '100%';
    
    //スライド1枚目の動画
    yt['player1'] = new YT.Player('player1', {
        width: w,
        height: h,
        videoId: '4d118fHF8QE',
        events: {
            'onReady': onPlayerReady,
        },
    });
    //スライド2枚目の動画
    yt['player2'] = new YT.Player('player2', {
        width: w,
        height: h,
        videoId: 'HzUDAaYMNsA',
    });
    //スライド3枚目の動画
    yt['player3'] = new YT.Player('player3', {
        width: w,
        height: h,
        videoId: '5LI1PysAlkU',
    });
}

//スライド1枚目の自動再生用
function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}

ここまでを追記してページを更新してみましょう。スライドに動画が表示されているはずです。ゴールまでもう少しです！

最後にSwiper側でスライド切り替え時にYoutube動画の再生・一時停止が自動で実行されるように処理を作っていきましょう。

スライド切り替え時の処理を作成する

というわけで試行錯誤して完成したスクリプトがこちらです。

//スライド切り替え開始時にすべての動画を一時停止にする
swiper.on('transitionStart', function(){
    yt['player1'].pauseVideo();
    yt['player2'].pauseVideo();
    yt['player3'].pauseVideo();
});

//スライド切り替え完了時にアクティブスライドの動画を再生する
swiper.on('transitionEnd', function(){

    var index = this.realIndex;
    var slide = document.getElementsByClassName('swiper-slide')[index];
    var slideVideo = slide.getElementsByTagName('iframe')[0];
    var slideVideoId = slideVideo.getAttribute('id');

    if(slideVideo != null || slideVideo != undefined){
        yt[slideVideoId].mute();
        yt[slideVideoId].playVideo();
    }
});

一時停止の処理はループで回したかったのですがうまくいかず…納期までそんなに日もなかったので公開優先でこのようにしています。

JSの全体をまとめると下記のようになります。

JS

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var yt = [];
function onYouTubeIframeAPIReady() {

    let w = '100%';
    let h = '100%';

    yt['player1'] = new YT.Player('player1', {
        width: w,
        height: h,
        videoId: '4d118fHF8QE',
        events: {
            'onReady': onPlayerReady,
        },
    });
    yt['player2'] = new YT.Player('player2', {
        width: w,
        height: h,
        videoId: 'HzUDAaYMNsA',
    });
    yt['player3'] = new YT.Player('player3', {
        width: w,
        height: h,
        videoId: '5LI1PysAlkU',
    });
}

function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}

const swiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

swiper.on('transitionStart', function(){
    yt['player1'].pauseVideo();
    yt['player2'].pauseVideo();
    yt['player3'].pauseVideo();
});

swiper.on('transitionEnd', function(){

    var index = this.realIndex;
    var slide = document.getElementsByClassName('swiper-slide')[index];
    var slideVideo = slide.getElementsByTagName('iframe')[0];
    var slideVideoId = slideVideo.getAttribute('id');

    if(slideVideo != null || slideVideo != undefined){
        yt[slideVideoId].mute();
        yt[slideVideoId].playVideo();
    }
});

今後時間があればループの対応と一時停止の部分を改良したいと思います。乞うご期待！と自信を持って言いたいところですが、あまり期待せずに待っていてください?