下面是一个视频元素,希望它完全进入视口的时候自动播放,离开视口的时候自动暂停。
<video src="foo.mp4" controls=""></video>
下面是 JS 代码。
let video = document.querySelector('video');
let isPaused = false;
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio != 1 && !video.paused) {
video.pause();
isPaused = true;
} else if (isPaused) {
video.play();
isPaused=false;
}
});
}, {threshold: 1});
observer.observe(video);
上面代码中,IntersectionObserver()
的第二个参数是配置对象,它的threshold
属性等于1
,即目标元素完全可见时触发回调函数。