
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でコントロール
問題点
埋め込みプレイヤー上で、一時停止するなどした時は、上手く動作しなくなるようです。どなたか、対策法の分かる方はご享受下さい…