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

import React, { useRef, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import ReactPlayer from 'react-player';

const VideoPlayer = () => {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const handleIntersection = (inView) => {
    if (inView) {
      setIsPlaying(true);
    } else {
      setIsPlaying(false);
    }
  };

  return (
    <div>
      <div ref={videoRef}>
        <ReactPlayer
          url="https://example.com/video.mp4" // 替换为实际视频的URL
          playing={isPlaying}
          controls
        />
      </div>
      <div>
        <h2>Video Title</h2>
        <p>Video description</p>
      </div>
    </div>
  );
};

const [ref, inView] = useInView({
  triggerOnce: true, // 视频只会在第一次进入视窗时播放
  threshold: 0.5, // 视频元素至少50%可见时触发回调
});

return (
  <div ref={ref}>
    {/* ... */}
  </div>
);

useEffect(() => {
  if (inView) {
    setIsPlaying(true);
  } else {
    setIsPlaying(false);
  }
}, [inView]);