h5 判断是否进入可视区域内（自动播放 video ）

Intersection Observer API

可以使用 Intersection Observer API 监听视频元素是否进入可视区域，如果进入可视区域则自动播放视频，同时设置视频静音。下面是一个示例代码：

<template>
  <div>
    <video
            ref="videoRef"
            src="https://xxx.mp4"
            controls
            controlslist="nodownload noremoteplayback disablePictureInPicture noplaybackrate "
            muted
            playsinline
          ></video>
  </div>
</template>

<script setup lang="ts">
const videoRef = ref<HTMLVideoElement | VNodeRef | null>(null);
const autoPlayVideo = () => {
      
      
  // 创建 Intersection Observer 对象
  const observer = new IntersectionObserver(entries => {
      
      
    entries.forEach(entry => {
      
      
      if (entry.isIntersecting) {
      
      
        // 视频进入可视区域，播放视频
        videoRef.value?.play();
        // 设置视频静音
        if (videoRef.value) {
      
      
          videoRef.value.muted = true;
        }
        // 停止监听
        observer.disconnect();
      }
    });
  });
  // 监听视频元素
  observer.observe(videoRef.value);
};
onMounted(() => {
      
      
  autoPlayVideo();
});
</script>

<style scoped>
video {
      
      
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

上述代码中，我们创建了一个 Intersection Observer 对象，用于监听视频元素是否进入可视区域。当视频元素进入可视区域时，我们调用 play 方法播放视频，并将 muted 属性设置为 true 静音视频。最后，我们停止监听视频元素，避免重复播放。

需要注意的是，为了在移动设备上自动播放视频，我们需要将 playsinline 属性设置为 true，以避免 iOS 中视频全屏播放。同时，我们还可以使用 CSS 的 object-fit 属性来设置视频元素的填充方式。

低版本兼容 IntersectionObserver polyfill

IntersectionObserver polyfill 是一个用于实现 IntersectionObserver 功能的 JavaScript 库。它可以在不支持 IntersectionObserver 的浏览器中提供类似的功能。以下是使用 IntersectionObserver polyfill 的步骤：

安装 IntersectionObserver polyfill

可以使用 npm 或 yarn 安装 IntersectionObserver polyfill：

npm install intersection-observer

或

yarn add intersection-observer

导入 IntersectionObserver polyfill

在需要使用 IntersectionObserver 的文件中导入 IntersectionObserver polyfill：

import 'intersection-observer';

使用 IntersectionObserver

现在，你可以像使用原生 IntersectionObserver 一样使用 IntersectionObserver polyfill 了。例如，可以使用以下代码监听元素是否进入视口：

const observer = new IntersectionObserver(entries => {
    
    
  entries.forEach(entry => {
    
    
    console.log(entry.target, entry.isIntersecting);
  });
});

observer.observe(document.querySelector('.element'));

需要注意的是，IntersectionObserver polyfill 会增加一些额外的开销，因此在支持 IntersectionObserver 的浏览器中，最好还是使用原生的 IntersectionObserver。