Javascript 使用交叉点观察者在ReactJs中播放/暂停视频

我在我的web应用程序中得到了一个名为

Video

的子组件，该组件内部启用了一个单独的滚动条，在滚动条中加载的视频列表中，每个视频都占据了

Video

组件的全部高度和宽度。我在

useffect（）

内部使用

Intersection Observer API

触发当前播放视频的暂停，当用户向下滚动到下一个视频时，下一个视频应该立即开始播放。这应该贯穿整个组件。我现在还不能实现这个功能，我现在的功能是一次播放列表上的视频

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;

import React，{useRef，useState，useffect}来自“React”；
导入“/Video.css”；
从“/VideoFooter”导入VideoFooter；
从“/VideoSidebar”导入VideoSidebar；
功能视频（{url、喜欢、共享、消息、频道、描述、歌曲}）{
const[playing，setPlaying]=useState（false）；
const videoRef=useRef（空）；
//需要帮忙吗
useffect（（）=>{
让视频=document.querySelector（“视频”）；
让观察者=新的相交观察者(
（条目）=>{
如果（entry.intersectionRatio！=0.5&&！播放）{
videoRef.current.pause（）；
布景播放（真实）；
}否则，如果（玩）{
videoRef.current.play（）；
布景播放（假）；
}
},
{阈值：1}
);
观察者观察（录像）；
}，[玩]；
const handleVideoPress=（）=>{
如果（玩）{
videoRef.current.pause（）；
布景播放（假）；
}否则{
videoRef.current.play（）；
布景播放（真实）；
}
};
返回(
);
}
导出默认视频；

您正在调用

pause（）

如果它没有播放并且

play（）

如果是？如果是播放，则暂停或如果是暂停，则播放在编辑之前，它的说法正好相反。我意识到了这一点并进行了更改。但这没有什么区别。。知道我哪里出错了吗？

视频

组件是一个单独的视频吗？它是否存在于某种容器组件中？我对您问题中的“子组件”一词有点困惑，它是容器还是更大容器中的单个子组件？感谢您提供此代码片段，它可能会提供一些有限的、即时的帮助。通过展示为什么这是一个很好的问题解决方案，A将极大地提高它的长期价值，并将使它对未来有其他类似问题的读者更有用。请在您的回答中添加一些解释，包括您所做的假设。

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);
});