埋め込んだYouTubeでFacebookみたいな動画自動再生を実装した話。スクロールで再生するやつ #JavaScript

InstagramやFacebookなどスクロールして画面内に入るとタイムライン上の動画が自動で再生されるようなサイトが増えてきました。（インフィード動画再生？）
他のサイトでもGIFアニメーションを使ってループ再生させているサイトもありますね。

例えばamazonの広告とか

動画の自動再生はページ滞在時間や広告効果の向上があると言われています。Facebookでは広告効果が10%も上がったとか。

自サイトで動画コンテンツを扱う場合、YouTubeにファイルをアップロードして、それをembedする方法が一般的かと思います。そこでYouTube動画の自動再生機能を実装した方法を解説します。

『YouTube埋め込みプレーヤー』で自動再生させる

自動再生で一番簡単な実装は、読み込むiframeのURLにautoplayパラメータを付ける方法です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/8-en4JdCGRo?autoplay=1" frameborder="0" allowfullscreen></iframe>

サンプル

autoplay=1とすることで自動再生は実現できます。しかし、この方法では読み込んだ瞬間に再生されます。
さらにミュートの状態がキャッシュされるので、一度ミュートを解除すると勝手に音声が流れてしまいます。
今回はこれでは不適切な実装となってしまいます。

『YouTube IFrame API』で再生プレイヤーを制御する

YouTube IFrame APIを埋め込んだ動画の制御ができます。

操作は簡単でYouTubeのapi用jsが読み込まれると定義したonYouTubeIframeAPIReady関数が実行されます。
そこで作った動画プレイヤーでplayVideoとpauseVideoの実行、これとブラウザのスクロールイベントと合わせて、画面内に入ったら自動再生・画面外で停止の制御を実装していきます。

<div id="player"></div>

<script>
var player

// YouTube IFrame APIのjsが読み込まれ終わったときの処理
function onYouTubeIframeAPIReady() {
  // プレイヤー作成
  player = new YT.Player("player", {
    height: 390,
    width: 640,
    videoId: "8-en4JdCGRo",
    events: {
      "onReady": function(event){
        // ミュート設定をする
        event.target.mute()
      }
    }
  })
}

// スクロールイベント
window.addEventListener("scroll", function() {
  // 画面内にプレイヤーがあるかを判定
  if (window.scrollY < player.getIframe().offsetTop &&
      window.scrollY + window.screen.height > player.getIframe().offsetTop + player.getIframe().offsetHeight) {
    // 動画再生
    player.playVideo()
  } else {
    // 動画停止
    player.pauseVideo()
  }
})
</script>
<script src="https://www.youtube.com/iframe_api"></script>

サンプル

player.getIframe()でiframe要素を取得できるので、そこから位置・高さの取得が可能です。
こんな感じで動作させることができました。
もっと細かくプレイヤー制御を行うことができますのでドキュメントを参考にしてください。

実際の実装例

ゲーム攻略コミュニティ『GAMY』で実際に動画の自動再生を実装してみました。
こちらの『地獄クエスト「五聖獣襲来！闇の聖獣麒麟(地獄魔王級)」無課金ノーコン攻略＆動画』という記事で動作していますので参考にどうぞ。