HTML videoタグででpreload属性にmetadataやnoneを指定したときに、要素が表示されたら動画を再生されることを実装するコードのデモです。
ここでは1つの動画を2つ配置し、1つ目にはpreload="metadata"、2つ目にpreload="none"をつけています。
HTML
<video class="lazy-video" preload="metadata" muted loop playsinlin src="動画ファイルパス"></video>
JavaScriptで、画面に表示されたタイミングで自動再生を開始させます。
javascript
const options = {
root: null,
rootMargin: '0px',
threshold: 0.5
};
const callback = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const video = entry.target;
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise
.then(_ => {
console.log('再生開始');
})
.catch(error => {
console.log('自動再生失敗:', error.message);
});
}
}
});
};
const observer = new IntersectionObserver(callback, options);
document.querySelectorAll('.lazy-video').forEach(video => {
observer.observe(video);
});
上記コードで実装した表示です。