使用Intersection Observer在ReactJs中播放/暂停视频

如何解决使用Intersection Observer在ReactJs中播放/暂停视频

我在Web应用程序中获得了一个名为Video的子组件，并在其中启用了单独的滚动条，其中加载了一个视频列表，每个列表占用了Video组件的整个高度和宽度。当用户向下滚动到下一个视频并且下一个视频应立即开始播放时，我在Intersection Observer API中使用useEffect()来触发当前播放视频的暂停。这应该在整个组件中继续进行。到目前为止，我无法实现此功能，而我当前的功能会立即开始播放列表中的视频。

import React,{ useRef,useState,useEffect } from "react";
import "./Video.css";
import VideoFooter from "./VideoFooter";
import VideoSidebar from "./VideoSidebar";

function Video({ url,likes,shares,messages,channel,description,song }) {

  const [playing,setPlaying] = useState(false);
  const videoRef = useRef(null);
                                      //NEED HELP OVER HERE
    useEffect(() => {
    let video = document.querySelector("video");
    let observer = new IntersectionObserver(
      (entry) => {
        if (entry.intersectionRatio != 0.5 && !playing) {
          videoRef.current.pause();
          setPlaying(true);
        } else if (playing) {
          videoRef.current.play();
          setPlaying(false);
        }
      },{ threshold: 1 }
    );
    observer.observe(video);
  },[playing]);

  const handleVideoPress = () => {
    if (playing) {
      videoRef.current.pause();
      setPlaying(false);
    } else {
      videoRef.current.play();
      setPlaying(true);
    }
  };

  return (
    <div className="video">
      <video
        onClick={handleVideoPress}
        className="video__player"
        loop
        ref={videoRef}
        src={url}
      ></video>
    </div>
  );
}

export default Video;

解决方法

let options = {
    root: null,rootMargin: '0px',threshold: 0.8
};

let callback = (entries,observer) => {
    entries.forEach(entry => {
        if (entry.target.id == 'myvideo')
        {
            if (entry.isIntersecting) {
                entry.target.play();
            }
            else {
                entry.target.pause();
            }
        }

    });
}

let observer = new IntersectionObserver(callback,options);
const videos = document.querySelectorAll("video");

videos.forEach(vide => {
    observer.observe(vide);
});