实现效果: 视频播放时,页面下拉滚动,超出视频视线范围,则右下角出现小窗口播放视频。
实现逻辑:同一个视频,运用监听方法,当原视频未出现在窗口内时,视频容器增加一个css类,并poisiton: fixed 定位,调整容器的大小以及样式,待原视频出现在窗口内,就移除相关css类即可。
用到的方法:IntersectionObserver API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。
const interObserver = new IntersectionObserver((entries) => {
// isIntersecting 为true 说明元素在root 的视线内
if (entries[0].isIntersecting === false) {
this.showPicture(); // 显示小窗口视频
} else {
this.exitPicture(); // 退出小窗口视频
}
}, {
root: null, // viewport 元素,null默认就是相当于window 窗口
threshold: 0 // 可视区域为0 视为曝光,也可以设置0,0.2,0.5,0.8 等值
});
interObserver.observe(document.querySelector(".videoplayer"));
IntersectionObserver.observe(document.querySelector(".videoplayer")) 监听方法
IntersectionObserver.unobserve(document.querySelector(".videoplayer")) 取消监听