多<ReactPlayer>组件播放控制：启动一个时自动暂停其他

问题场景 #

我封装了基于ReactPlayer的自定义组件VideoPlayer，页面中存在多个该组件时视频会同时播放，需要手动暂停其他视频。目标是启动一个视频时自动暂停其余所有视频。视频托管在Vimeo平台，组件支持接收singleVideoIndex属性：不传时显示播放列表，传入则仅加载对应索引视频且隐藏播放列表。目前通过操作DOM的临时方案可以运行，但不符合React范式，寻求更优解。

优化思路 #

React中处理跨组件状态同步，优先采用Context API实现全局播放状态管理，核心逻辑：

• 全局维护一个「正在播放的播放器唯一标识」
• 每个播放器实例订阅全局状态，当活跃标识不是自己时自动暂停
• 播放器开始播放时，更新全局活跃标识为自身ID

分步实现 #

1. 创建播放状态Context #

先定义全局Context，用来存储和更新当前活跃的播放器ID：

// VideoPlayerContext.js
import { createContext, useContext, useState } from 'react';

const VideoPlayerContext = createContext();

export function VideoPlayerProvider({ children }) {
  const [activePlayerId, setActivePlayerId] = useState(null);

  return (
    <VideoPlayerContext.Provider value={{ activePlayerId, setActivePlayerId }}>
      {children}
    </VideoPlayerContext.Provider>
  );
}

export function useVideoPlayerContext() {
  return useContext(VideoPlayerContext);
}

2. 修改组件接入Context #

为每个播放器生成唯一ID，订阅全局状态并同步自身播放状态：

import { useRef, useState, useEffect, useId } from 'react';
import ReactPlayer from 'react-player/vimeo';
import { useVideoPlayerContext } from './VideoPlayerContext';

function VideoPlayer({ singleVideoIndex }) {
  const videos = [...]; // 你的视频列表数据
  const playerRef = useRef(null);
  // 生成唯一播放器ID，也可直接用singleVideoIndex作为ID（如果唯一）
  const playerId = useId(); 
  const { activePlayerId, setActivePlayerId } = useVideoPlayerContext();
  
  const defaultIndex = 0;
  const [activeVideo, setActiveVideo] = useState(singleVideoIndex ?? defaultIndex);
  const [seekTime, setSeekTime] = useState(0);
  const [playing, setPlaying] = useState(false);

  // 监听全局活跃播放器，非当前播放器时自动暂停
  useEffect(() => {
    if (activePlayerId !== playerId && playing) {
      setPlaying(false);
    }
  }, [activePlayerId, playerId, playing]);

  // 播放时更新全局活跃ID
  const handlePlay = () => {
    setActivePlayerId(playerId);
    setPlaying(true);
  };

  // 播放列表切换视频
  const playVideo = (index) => {
    setActiveVideo(index);
    setPlaying(true);
    setActivePlayerId(playerId);
  };

  // 章节切换逻辑
  const selectChapter = (videoIndex, time) => {
    if (videoIndex !== activeVideo) {
      setActiveVideo(videoIndex);
    }
    setSeekTime(time);
    playerRef.current?.seekTo(time);
    setPlaying(true);
    setActivePlayerId(playerId);
  };

  return (
    <ReactPlayer
      ref={playerRef}
      url={`https://vimeo.com/${videos[activeVideo].vimeoId}`}
      controls
      playing={playing}
      onReady={() => playerRef.current?.seekTo(seekTime)}
      onPlay={handlePlay}
      onPause={() => setPlaying(false)}
      width="100%"
      height="100%"
      className="video-player"
    />
  );
}

export default VideoPlayer;

3. 全局包裹Provider #

在包含所有VideoPlayer的父组件（或根组件）中添加Context Provider：

import { VideoPlayerProvider } from './VideoPlayerContext';
import VideoPlayer from './VideoPlayer';

function App() {
  return (
    <VideoPlayerProvider>
      <VideoPlayer />
      <VideoPlayer singleVideoIndex={1} />
      <VideoPlayer singleVideoIndex={2} />
    </VideoPlayerProvider>
  );
}

方案优势 #

• 完全遵循React状态管理范式，避免直接操作DOM，代码更可靠易维护
• 组件解耦，无需依赖DOM选择器，支持任意数量的播放器实例
• 内部切换视频/章节时，自动同步全局播放状态，逻辑统一

内容的提问来源于stack exchange，提问作者Ronnie