使用IntersectionObserver处理视频滚动到可视窗口内时自动播放

IntersectionObserver

• Web中使用

var query = document.querySelector('#video');
var options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5
}
var observer = new IntersectionObserver(function(entries, observer) {
  // isIntersecting返回true代表在页面可视区域，false代表不在页面可视区域
  const isIntersecting = entries[0].isIntersecting;
  if(isIntersecting) {
    query.play()
  }
}, options);

observer.observe(query);

// 停止对一个元素的观察
// if(observer){
//   observer.unobserve(query)
// }

• Vue3中需要在生命周期中获取元素和监听事件

var query = null;
var options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5
}
var observer = new IntersectionObserver(function(entries, observer) {
  // isIntersecting返回true代表在页面可视区域，false代表不在页面可视区域
  const isIntersecting = entries[0].isIntersecting;
  if(isIntersecting) {
    query.play()
  }
}, options);

onMounted(() => {
  query = document.querySelector('#video');
  observer.observe(query);
})

onBeforeUnmount(()=>{
  if(observer){
    observer.unobserve(query) // 停止对一个元素的观察
  }
})