h5 determines whether it enters the visible area (automatically plays video)

Intersection Observer API

URL: Intersection Observer API

You can use the Intersection Observer API to monitor whether the video element enters the visible area, and if it enters the visible area, the video will be automatically played and the video will be muted. Here is a sample code:

<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>

In the above code, we created an Intersection Observer object to monitor whether the video element enters the visible area. When the video element comes into view, we call playthe method to play the video and mutedset the property to truemute the video. Finally, we stop listening to the video element to avoid repeating it.

It should be noted that in order to automatically play the video on the mobile device, we need to set playsinlinethe attribute trueto avoid full-screen video playback in iOS. At the same time, we can also use the CSS object-fitproperty to set the filling method of the video element.

Low version is compatible with IntersectionObserver polyfill

The IntersectionObserver polyfill is a JavaScript library for implementing IntersectionObserver functionality. It provides similar functionality in browsers that do not support IntersectionObserver. Here are the steps to use the IntersectionObserver polyfill:

1. Install the IntersectionObserver polyfill

The IntersectionObserver polyfill can be installed using npm or yarn:

npm install intersection-observer

or

yarn add intersection-observer

2. Import the IntersectionObserver polyfill

Import the IntersectionObserver polyfill in the file that needs to use IntersectionObserver:

import 'intersection-observer';

3. Use IntersectionObserver

Now, you can use the IntersectionObserver polyfill just like the native IntersectionObserver. For example, you can use the following code to listen to whether an element enters the viewport:

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

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

It should be noted that the IntersectionObserver polyfill will add some additional overhead, so in browsers that support IntersectionObserver, it is best to use the native IntersectionObserver.