スクロールして各動画が画面内に入った瞬間に動画を再生したい。

Question

実現したいこと

スクロールして各動画が画面内に入った瞬間に動画を再生したい。

前提

videoタグで動画を挿入しているページを作成しています。
ページ内で動画が６つあります。

発生している問題

デバイス、ブラウザによっては、画面に一番上の動画部分が見え始めた時に、二番目以降の動画も同時に再生されてしまい、動画の冒頭が見えなくなってしまいます。
私がこの問題を確認できたのは、
PCのfire fox、IOSのChrome、fire foxでした。
PCのChrome、Safari、IOSのSafariでは、各動画が画面内に入った瞬間に動画が再生されました。
初心者でしてわからないことが多く、聞ける人も周りにいないため、こちらを使わせていただきました。どなたかご教授いただけると幸いです。

該当のソースコード

         <div class="video_wrap">
              <video loop autoplay muted playsinline>
                <source src="movie01.mp4" type="video/mp4">
              </video>
          </div>
          <div class="video_wrap">
              <video loop autoplay muted playsinline>
                <source src="movie02.mp4" type="video/mp4">
              </video>
          </div>
          <div class="video_wrap">
              <video loop autoplay muted playsinline>
                <source src="movie03.mp4" type="video/mp4">
              </video>
          </div>
          <div class="video_wrap">
              <video loop autoplay muted playsinline>
                <source src="movie04.mp4" type="video/mp4">
              </video>
          </div>
          <div class="video_wrap">
              <video loop autoplay muted playsinline>
                <source src="movie05.mp4" type="video/mp4">
              </video>
          </div>
          <div class="video_wrap">
              <video loop autoplay muted playsinline>
                <source src="movie06.mp4" type="video/mp4">
              </video>
          </div>

$(window)
    .on('scroll resize', function () {
        // ウインドウのスクロール量取得
        var windowScrollTop = $(window).scrollTop();
        // ウインドウの高さ取得
        var windowInnerHeight = window.innerHeight;

        var $video = $('video');
        // videoがページの最上部からどの位置にあるか取得
        var videoTop = $('video').offset().top;
        // videoの高さ取得
        var videoHeight = $('video').innerHeight();

        // videoが停止している、かつvideoが画面内に入ってきた場合、再生処理
        if ($video[0].paused && (windowScrollTop + windowInnerHeight > videoTop)) {
            $video[0].play();
        }

        // videoが再生中、かつ画面外に出た場合、停止処理
        if (!$video[0].paused && ((windowScrollTop + windowInnerHeight < videoTop) || (windowScrollTop > videoTop + videoHeight))) {
            $video[0].pause();
        }
    })
    .trigger('scroll');

Answer 1

        var $video = $('video');
        // videoがページの最上部からどの位置にあるか取得
        var videoTop = $('video').offset().top;
        // videoの高さ取得
        var videoHeight = $('video').innerHeight();

$video には複数の video 要素が入っているはずなのに、最初の要素しか処理してないように見えます。each() で個々の video 要素の処理をすべきでしょう。

$('video').each(function(index, video) {
  const videoTop = $(video).offset().top;
  const videoHeight = $(video).innerHeight();
  ...

Comments

[nari10]

ありがとうございます！
以降の$videoを$(this)とすることで思い通りの動作になりました。