ReactJS中实现双视频无缝切换（不中断播放）方案咨询

你的核心问题在于条件渲染导致播放器卸载——切换时组件被销毁，播放器停止播放并释放资源，切换回来需要重新加载缓冲。解决思路是让两个播放器始终保持渲染，仅通过样式控制可见性，同时同步它们的播放状态。

具体实现步骤 #

1. 调整DOM结构：始终渲染两个播放器 #

去掉原代码中的条件渲染逻辑，把两个播放器都渲染到页面中，用CSS类控制显示/隐藏，这样播放器不会被卸载，后台持续播放。

修改后的JSX：

<div className="playerView">
  <div className={`inputPreview ${checked ? 'visible' : 'hidden'}`}>
    <VideoJS options={videoJsOptions} ref={videoJsRef} />
  </div>
  <div className={`outputPreview ${!checked && enableOutputPreview ? 'visible' : 'hidden'}`}>
    <ShakaPlayer src={shakaSource} ref={shakaRef} />
  </div>
</div>

对应的CSS样式（让两个播放器重叠在同一位置）：

.playerView {
  position: relative;
  width: 100%;
  height: 100%;
}
.inputPreview, .outputPreview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hidden {
  opacity: 0;
  pointer-events: none; /* 避免隐藏的播放器接收用户操作 */
}
.visible {
  opacity: 1;
  pointer-events: auto;
}

2. 同步两个播放器的核心状态 #

要实现无缝切换，必须让两个播放器的播放时间、播放/暂停状态、音量、播放速度完全同步。需要获取两个播放器的实例，监听状态变化事件并互相同步。

下面是React组件的完整逻辑示例（假设你的封装组件会通过ref暴露播放器实例）：

import { useRef, useEffect } from 'react';
import VideoJS from './VideoJS';
import ShakaPlayer from './ShakaPlayer';

const VideoComparison = ({ videoJsOptions, shakaSource, enableOutputPreview, checked }) => {
  const videoJsRef = useRef(null);
  const shakaRef = useRef(null);
  let isSyncing = false; // 防止循环触发同步

  // 获取播放器实例
  const getVideoJs = () => videoJsRef.current?.player;
  const getShaka = () => shakaRef.current?.player;

  // 同步播放时间
  const syncTime = (from, to) => {
    if (isSyncing) return;
    isSyncing = true;
    try {
      to.currentTime(from.currentTime());
    } catch (e) {
      console.error('同步时间失败:', e);
    } finally {
      isSyncing = false;
    }
  };

  // 同步播放/暂停状态
  const syncPlayState = (from, to) => {
    if (isSyncing) return;
    isSyncing = true;
    try {
      from.paused() ? to.pause() : to.play();
    } catch (e) {
      console.error('同步播放状态失败:', e);
    } finally {
      isSyncing = false;
    }
  };

  // 同步音量和播放速度
  const syncVolume = (from, to) => {
    if (isSyncing) return;
    isSyncing = true;
    try {
      to.volume(from.volume());
    } catch (e) {
      console.error('同步音量失败:', e);
    } finally {
      isSyncing = false;
    }
  };

  const syncRate = (from, to) => {
    if (isSyncing) return;
    isSyncing = true;
    try {
      to.playbackRate(from.playbackRate());
    } catch (e) {
      console.error('同步播放速度失败:', e);
    } finally {
      isSyncing = false;
    }
  };

  useEffect(() => {
    const videoJs = getVideoJs();
    const shaka = getShaka();
    if (!videoJs || !shaka) return;

    // 初始化时对齐所有状态
    syncTime(videoJs, shaka);
    syncPlayState(videoJs, shaka);
    syncVolume(videoJs, shaka);
    syncRate(videoJs, shaka);

    // 监听VideoJS事件，同步到Shaka
    const handleVideoJsTime = () => syncTime(videoJs, shaka);
    const handleVideoJsPlay = () => syncPlayState(videoJs, shaka);
    const handleVideoJsPause = () => syncPlayState(videoJs, shaka);
    const handleVideoJsVolume = () => syncVolume(videoJs, shaka);
    const handleVideoJsRate = () => syncRate(videoJs, shaka);

    videoJs.on('timeupdate', handleVideoJsTime);
    videoJs.on('play', handleVideoJsPlay);
    videoJs.on('pause', handleVideoJsPause);
    videoJs.on('volumechange', handleVideoJsVolume);
    videoJs.on('ratechange', handleVideoJsRate);

    // 监听Shaka事件，同步到VideoJS
    const handleShakaTime = () => syncTime(shaka, videoJs);
    const handleShakaPlay = () => syncPlayState(shaka, videoJs);
    const handleShakaPause = () => syncPlayState(shaka, videoJs);
    const handleShakaVolume = () => syncVolume(shaka, videoJs);
    const handleShakaRate = () => syncRate(shaka, videoJs);

    shaka.addEventListener('timeupdate', handleShakaTime);
    shaka.addEventListener('play', handleShakaPlay);
    shaka.addEventListener('pause', handleShakaPause);
    shaka.addEventListener('volumechange', handleShakaVolume);
    shaka.addEventListener('ratechange', handleShakaRate);

    // 清理事件监听
    return () => {
      videoJs.off('timeupdate', handleVideoJsTime);
      videoJs.off('play', handleVideoJsPlay);
      videoJs.off('pause', handleVideoJsPause);
      videoJs.off('volumechange', handleVideoJsVolume);
      videoJs.off('ratechange', handleVideoJsRate);

      shaka.removeEventListener('timeupdate', handleShakaTime);
      shaka.removeEventListener('play', handleShakaPlay);
      shaka.removeEventListener('pause', handleShakaPause);
      shaka.removeEventListener('volumechange', handleShakaVolume);
      shaka.removeEventListener('ratechange', handleShakaRate);
    };
  }, [videoJsOptions, shakaSource]);

  return (
    <div className="playerView">
      <div className={`inputPreview ${checked ? 'visible' : 'hidden'}`}>
        <VideoJS options={videoJsOptions} ref={videoJsRef} />
      </div>
      <div className={`outputPreview ${!checked && enableOutputPreview ? 'visible' : 'hidden'}`}>
        <ShakaPlayer autoPlay={false} src={shakaSource} ref={shakaRef} />
      </div>
    </div>
  );
};

export default VideoComparison;

关键注意事项 #

• 关闭自动播放冲突：不要给两个播放器同时设置autoPlay，避免初始化时互相干扰，统一通过同步逻辑控制播放。
• 确保实例暴露正确：你的VideoJS和ShakaPlayer封装组件需要通过ref返回原生播放器实例，比如VideoJS的player对象，Shaka的player实例。
• 优化同步频率：timeupdate事件触发非常频繁，可以用节流函数（比如lodash.throttle）限制每秒同步1-2次，减少性能消耗。
• 处理加载状态：如果视频加载进度不一致，可以监听loadedmetadata事件，等两个视频都加载完成后再开始同步。

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