如何使用react原生视频播放视频并在扁平列表中暂停其他视频

import React, { useState } from 'react';

const VideoPlayer = ({ videoUrl, isPaused, onPause }) => {
  const videoRef = React.createRef();

  // 播放视频
  const playVideo = () => {
    videoRef.current.play();
  };

  // 暂停视频
  const pauseVideo = () => {
    videoRef.current.pause();
  };

  // 当视频播放状态改变时调用
  const handleVideoStateChange = () => {
    if (isPaused) {
      pauseVideo();
    } else {
      playVideo();
    }
  };

  return (
    <video
      ref={videoRef}
      src={videoUrl}
      controls
      onPause={onPause}
      onPlay={playVideo}
      onPause={pauseVideo}
      onEnded={pauseVideo}
    />
  );
};

const VideoList = ({ videos }) => {
  const [pausedVideo, setPausedVideo] = useState(null);

  // 暂停其他视频
  const pauseOtherVideos = (videoId) => {
    setPausedVideo(videoId);
  };

  return (
    <div>
      {videos.map((video) => (
        <div key={video.id}>
          <h3>{video.title}</h3>
          <VideoPlayer
            videoUrl={video.url}
            isPaused={pausedVideo !== video.id}
            onPause={() => pauseOtherVideos(video.id)}
          />
        </div>
      ))}
    </div>
  );
};

const App = () => {
  const videos = [
    { id: 1, title: 'Video 1', url: 'video1.mp4' },
    { id: 2, title: 'Video 2', url: 'video2.mp4' },
    { id: 3, title: 'Video 3', url: 'video3.mp4' },
  ];

  return (
    <div>
      <h2>Video List</h2>
      <VideoList videos={videos} />
    </div>
  );
};

export default App;