[JavaScript] videoタグをページのスクロールに合わせて再生したい
- ページ内にvideoタグを配置したとき、スクロールしてvideoタグが見えるようになったら再生を開始したいというケースがあります
- videoタグには、Javascriptで再生／停止などの制御が行える関数があらかじめ用意されています
- この関数を活用し、Javascriptでページのスクロール量とvideoタグの位置をチェックすることで、videoタグが見えたタイミングで再生することができます
- jQueryでの実装例はこちらを参照
サンプルコード
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です。