在 React 中看不到时暂停视频

Question

我无法在视频未显示时暂停视频。切换到不同的滑块时，我已成功暂停它。 我还需要卸载或者如何防止它在不播放时在后台运行，所以它可能不会加载浏览器。

请在此处检查我的代码框 CLICK HERE

  useEffect(() => {
    const options = {
      root: document.querySelector("#video"),
      threshold: 0.1
    };
    observerRef.current = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio !== 1) {
          setPlayed(false);
        }
      });
    }, options);
  }, []);

Answer 1

Click here 检查我已修复您的代码，现在视频在看不见时暂停。 只是添加了一个钩子来检查玩家是否在 dom 中并根据此管理状态

const isVisible = useOnScreen(videoRef);

  useEffect(() => {
    setPlayed(isVisible);
  }, [isVisible]);

 <div ref={videoRef}  className="react-player-wrapper">
      <ReactPlayer
        playsinline={true}
        playing={played}
        ....
         
        light={    "https://pbs.twimg.com/profile_images/875749462957670400/T0lwiBK8_400x400.jpg"
        }
      />

用于检查玩家是否可见的钩子

 import React,{useEffect, useState} from "react";
    export default function useOnScreen(ref) {
      const [isIntersecting, setIntersecting] = useState(false)
      const observer = new IntersectionObserver(
        ([entry]) => setIntersecting(entry.isIntersecting)
      )

      useEffect(() => {
            observer.observe(ref.current)
        return () => { observer.disconnect() }
      }, [])
    
      return isIntersecting
    }