Web制作 JavaScript

【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名にして下さい。

 

デモ

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

3つ目のセクションに動画があります。

動画が表示されたら動画が再生されます(再生時間で分かると思います)

右下のRerunをクリックするとリロードされるので、もう一度確認したい場合はそれで確かめて下さい。

まとめ

今回は、動画をスクロールして画面内に表示されたら自動再生を開始する方法を解説しました。

自動再生をさせたくても、動画が表示された時点で再生が終わっていたら残念ですよね。

もしページの途中に動画がある場合、今回の方法が使えると思います。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作, JavaScript