画面スクロールでMP4の動画が範囲に入ったら再生する方法
カテゴリ：WEB制作
タグ：
企業サイトや商品のブランドサイトなどを作成する際に動画の埋め込みを行うことは多くあります。また、リッチなサイトを作成する際に背景に動画などを設置して、スクロールで再生することもあります。
特に近年ではモバイル回線の高速化したこともありスマホを利用しているユーザーにも動画の自動再生を行い場合があります。
今回はMP4の動画をサイトに設置してスクロール量に合わせて自動再生させる方法を紹介します。
コードの紹介
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールで動画自動再生</title>
<style>
/* ページ全体のスタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* スクロール用セクション */
div {
height: 1180px;
width: 100%;
line-height: 1180px;
text-align: center;
background: #f0f0f0;
}
.auto_play_wrap > *:nth-child(odd) {
background: #eeeeee;
}
.auto_play {
width: 100%;
padding: 80px 0;
text-align: center;
}
video {
width: 100%;
max-width: 600px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- スクロール用の余白 -->
<div>
<p>スクロールしてください。</p>
</div>
<div class="auto_play_wrap">
<div class="auto_play">
<video playsinline muted loop>
<source src="mp4/01.mp4" type="video/mp4">
</video>
</div>
<div class="auto_play">
<video playsinline muted loop>
<source src="mp4/02.mp4" type="video/mp4">
</video>
</div>
<div class="auto_play">
<video playsinline muted loop>
<source src="mp4/03.mp4" type="video/mp4">
</video>
</div>
<div class="auto_play">
<video playsinline muted loop>
<source src="mp4/04.mp4" type="video/mp4">
</video>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded",
const offsetAdjustment = -100;
const videos = document.querySelectorAll("video");
const handleScroll = () => {
videos.forEach((video) => {
const rect = video.getBoundingClientRect();
const adjustedTop = rect.top + offsetAdjustment;
const adjustedBottom = rect.bottom + offsetAdjustment;
if (adjustedTop >= 0 && adjustedBottom <= window.innerHeight) {
if (video.paused) {
video.play();
}
} else {
if (!video.paused) {
video.pause();
}
}
});
};
handleScroll();
window.addEventListener("scroll", handleScroll);
});
</script>
</body>
</html>
コードを解説
HTMLの解説は割愛します。
JavaScript
読み込みが完了してから実行します。
document.addEventListener("DOMContentLoaded", function () {
});
背景に動画を設置する際などは要素が再生位置を微調整する必要がある場合も多いので、位置調整用に値を設置しておきます。
const offsetAdjustment = -100;
全てのvideoタグを取得します。
const videos = document.querySelectorAll("video");
スクロール位置の取得や自動再生をさせるための関数を書いていきます。
const handleScroll = () => {
};
取得した各video要素に対しての処理をループで実行させます。
videos.forEach((video) => {
});
動画の設置要素の位置を取得します。
const rect = video.getBoundingClientRect();
冒頭で作成した位置調整の部分の計算を行います。
const adjustedTop = rect.top + offsetAdjustment; const adjustedBottom = rect.bottom + offsetAdjustment;
画面内に動画が完全に表示されている場合に再生、それ以外は停止させます。
if (adjustedTop >= 0 && adjustedBottom <= window.innerHeight) {
if (video.paused) {
video.play();
}
} else {
if (!video.paused) {
video.pause();
}
}
スクロール以外にもページ読み込み時に一度だけ自動再生を実行します。
handleScroll();
ウィンドウのスクロールイベントが発生するたびにhandleScrollを実行します。
window.addEventListener("scroll", handleScroll);
まとめ
以上、『画面スクロールでMP4の動画が範囲に入ったら再生する方法』でした。
スクロールでの自動再生はサイト制作においても多く発生しますので必要になったら参考にしてみてください。
