【JavaScript】動画をスクロールして画面内に表示されたら自動再生を開始する方法

ページ内の動画だけど、ページを開いた時じゃなくて、スクロールしていって画面に表示されたタイミングで再生開始ってどうやるの？

ページにmp4など動画を埋め込んだ場合、動画を自動再生させることがあります。

それがページの下の方にあった場合、ページを開いた瞬間ではなく、動画が表示されたタイミングで再生を開始させる方法を解説します。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

動画をスクロールして画面内に表示されたら自動再生を開始する方法

早速コードを解説していきます。

HTML

今回は、HTMLでvideoタグを使います。

HTMLはこちら。

<header class="header">
  <nav class="header-nav">
    <ul class="header-list">
      <li class="header-item"><a href="#anchor01">HOME</a></li>
      <li class="header-item"><a href="#anchor02">ABOUT</a></li>
      <li class="header-item"><a href="#anchor03">SHOP</a></li>
      <li class="header-item"><a href="#anchor04">NEWS</a></li>
    </ul>
  </nav>
</header>
<!-- メインコンテンツ -->
<main>
  <section class="section01" id="anchor01">
    <h2 class="section-title">HOME</h2>
  </section>
  <section class="section02" id="anchor02">
    <h2 class="section-title">ABOUT</h2>
  </section>
  <section class="section03" id="anchor03">
    <h2 class="section-title">SHOP</h2>
    <div class="video-wrapper js-video">
      <video muted playsinline controls>
        <source
          src=“動画パス”
          type="video/mp4"
        />
      </video>
    </div>
  </section>
  <section class="section04" id="anchor04">
    <h2 class="section-title">NEWS</h2>
  </section>
</main>

ちょっと長いですが、重要なのはここだけです。

<div class="video-wrapper js-video">
  <video muted playsinline controls>
    <source
      src="画像パス"
      type="video/mp4"
    />
  </video>
</div>

まず、JavaScriptで使うためのclassにjs-videoを付けています。

そして、videoタグには3つの属性が設定されています。

muted
動画の音声がミュートされているかどうかを指定。つまりmuted属性が設定されている場合、動画の音声は再生されません。
playsinline
iOSデバイス（iPhoneやiPadなど）での動画再生の挙動を制御。playsinline属性が設定されている場合、動画はインラインで再生され、全画面モードになることはありません。
controls
動画のコントロール（再生、一時停止、音量調整など）を表示するかどうかを指定。controls属性が設定されている場合、動画プレーヤーにコントロールが表示されます。

CSS

CSSに関しては、特に変わったところはありません。

全部見たい人は、この後のデモで左上のCSSをクリックして見て下さい。

JavaScript

// ページの読み込みが完了したときに実行する関数を設定
window.addEventListener(
  "load",
  function () {
    // 動画を再生する関数を定義
    function playVideos(videoWrappers) {
      // 動画が再生される位置を計算する
      const startPosition = window.pageYOffset + window.innerHeight;
      // 全ての動画ラッパーに対して処理を繰り返す
      for (let i = 0; i < videoWrappers.length; i++) {
        // 動画の位置を取得
        const videoPosition =
          videoWrappers[i].getBoundingClientRect().top + window.pageYOffset;
        // 動画が再生される位置までスクロールした場合、動画を再生する
        if (startPosition > videoPosition) {
          const video = videoWrappers[i].getElementsByTagName("video");
          video[0].play();
        }
      }
    }
    // クラス名が"js-video"である要素を取得
    const videoWrappers = document.getElementsByClassName("js-video");
    // クラス名が"js-video"である要素が存在する場合
    if (videoWrappers.length) {
      // 動画を再生する関数を実行
      playVideos(videoWrappers);
      // スクロール時に動画を再生する関数を実行するリスナーを設定
      window.addEventListener(
        "scroll",
        function () {
          playVideos(videoWrappers);
        },
        false
      );
    }
  },
  false
);

この中でご自身で書き換える箇所は、js-videoだけです。

ここは、HTMLで書いたclass名にして下さい。