ミギムキ

[JavaScript] videoタグをページのスクロールに合わせて再生したい

サンプルコード

html

<div class="video_wrapper"> <video muted playsinline loop> <source src="xxx.mp4" type="video/mp4"> <img src="xxx.png"> </video> </div>
スポンサー広告

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(); } } } const videoWrappers = document.getElementsByClassName('video_wrapper'); if(videoWrappers.length) { playVideos(videoWrappers); window.addEventListener('scroll', function() { playVideos(videoWrappers); }, false); } }, false);

サンプルコードの解説

スクロール量をチェックしてvideoタグを再生する関数

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(); } } }
  • ウインドウがスクロールされたときに実行される関数です
  • 引数として、ページ内にある「video_wrapper」クラスを配列で受け取ります
const startPosition = window.pageYOffset + window.innerHeight;
  • ウインドウのスクロール量を保持します
  • 「window.pageYOffset」は、ページの表示領域全体から見た、上端からのスクロール量になります
  • 「window.innerHeight」は、ウインドウの高さになります
  • 両者を足すことで、表示領域全体から見たウインドウ下端の位置が取得できます
const videoPosition = videoWrappers[i].getBoundingClientRect().top + window.pageYOffset;
スポンサー広告
  • videoタグをラップしている「video_wrapper」クラスの座標を保持します
  • 「getBoundingClientRect().top」は、ウインドウの表示領域内から見た、上端からの座標になります
  • ページの表示領域全体から見た座標ではないため、これに「window.pageYOffset」を足しています
if(startPosition > videoPosition) { const video = videoWrappers[i].getElementsByTagName('video'); video[0].play(); }
  • スクロール量の判定とvideoを再生する処理です
  • 表示中のウインドウ下端が、「video_wrapper」の位置よりも大きければ再生を開始します
  • videoの再生は「play()」の実行により行うことができます

画面読み込み時の処理

const videoWrappers = document.getElementsByClassName('video_wrapper'); if(videoWrappers.length) { playVideos(videoWrappers); window.addEventListener('scroll', function() { playVideos(videoWrappers); }, false); }
  • 画面読み込み時の各種処理です
  • 画面内にある「video_wrapper」クラスを取得し、クラスがいなければ何もしません
  • クラスが存在しているなら、一度「playVideos」関数を実行します。これは画面更新などによって、ページの読み込み段階で既にスクロールされている場合に即時動画を再生するために行います
  • あとは、ウインドウのスクロール時のイベントとして「playVideos」関数を登録します

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

スポンサー広告