YouTubeの埋め込みプレイヤーでタブが最前面にあるときだけ再生する方法

VSL（ビデオ・セールスレター）で、動画の再生中に別ウィンドウで決済画面を開いても、バックグラウンドで動画再生され続けるのが嫌だったので、対処法を考えてみました。

やってみたら、思ってたより簡単にできたので…

YouTubeの埋め込みプレイヤーで動画を再生中の時に、別のタブを開いたり、他のウィンドウに切り替えたときに、一時停止させるためのJavaScriptの記述方法を紹介します。もちろん、再びタブが最前面にきた時は、自動的に再生が再開されるようにします。

動作サンプル

こちらに動作サンプルを用意しました。

準備： JavaScript API を有効にする

<iframe width="640" height="360" 
src="https://www.youtube.com/embed/RvOowFwRn10?enablejsapi=1" 
frameborder="0" allowfullscreen id="YouTube-player">
</iframe>

まずは、「enablejsapi=1」というパラメーターを追加して、JavaScript API を有効にします。これで、YoutTubeの埋め込みプレイヤーをJavaScriptで操作できるようになります。ついでに、iframeにidを追加しておきましょう。

再生コントロール用のスクリプトを追加

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>
        $(function () {
            window.onblur = youtube_stop;
            window.onfocus = youtube_start;

            function youtube_stop() {
                videoControl("pauseVideo");
            }

            function youtube_start() {
                videoControl("playVideo");
            }

            function videoControl(action) {
                var $playerWindow = $('#YouTube-player')[0].contentWindow;
                $playerWindow.postMessage('{"event":"command","func":"' + action + '","args":""}', '*');
            }


        });
    </script>

上記のスクリプトをbodyタグ内に記述します。iframeに指定したidと揃える必要があります。

これで、別のタブを開いたり、他のウィンドウに切り替えたときに、動画の再生が一時停止されるようになるはずです。

 

参考：【JS】YouTubeのiframe埋め込み動画をJSでコントロール

問題点

埋め込みプレイヤー上で、一時停止するなどした時は、上手く動作しなくなるようです。どなたか、対策法の分かる方はご享受下さい…