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

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

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

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

動作サンプル

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

準備: JavaScript API を有効にする

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

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

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

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

 

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

問題点

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です