React中视频切换时白屏问题的解决方法

切换视频时出现白屏，本质是新视频资源还没加载完成，浏览器在等待数据期间显示空白。下面给你几个直接可行的解决思路：

方案一：预加载所有视频资源 #

在页面初始化时就把需要用到的视频提前加载到浏览器缓存，切换时直接读取缓存内容，彻底消除加载等待。

修改你的VideoContent.jsx，添加预加载逻辑：

// VideoContent.jsx
import { createContext, useState, useEffect } from "react";
import videos from "../utils/index";

const VideoContext = createContext();

const VideoProvider = ({ children }) => {
  const [activeVideo, setActiveVideo] = useState(videos.cam1Fixed);

  useEffect(() => {
    // 遍历所有视频URL，创建Video实例预加载
    Object.values(videos).forEach(videoUrl => {
      const video = new Video();
      video.src = videoUrl;
      video.preload = 'auto'; // 强制预加载视频元数据和部分内容
      video.muted = true; // 避免自动播放权限问题
    });
  }, []);

  return (
    <VideoContext.Provider value={{ activeVideo, setActiveVideo, videos }}>
      {children}
    </VideoContext.Provider>
  );
};

export { VideoContext, VideoProvider };

方案二：双Video标签无缝切换 #

同时渲染多个video标签，一个显示当前播放的视频，其余隐藏并预加载其他视频，切换时只需要切换标签的显示状态，完全没有加载间隙。

修改你的VideoPlayer.jsx：

// VideoPlayer.jsx
import { useContext, useEffect, useState } from "react";
import { VideoContext } from "../context/VideoContext";

const VideoPlayer = () => {
  const { activeVideo, videos, setActiveVideo } = useContext(VideoContext);
  const [loop, setLoop] = useState(null);

  const isLoop = () => {
    setLoop(activeVideo === videos.cam1Fixed || activeVideo === videos.cam2Fixed);
  };

  const onEnded = () => {
    if (!loop) {
      setActiveVideo(videos.cam2Fixed);
    }
  };

  useEffect(() => {
    isLoop();
  }, [activeVideo]);

  return (
    <div className="w-full h-full absolute top-0 left-0 z-[-1]">
      {/* 当前显示的视频 */}
      <video
        onEnded={onEnded}
        className="w-full h-full object-cover"
        src={activeVideo}
        autoPlay
        muted
        loop={loop}
      ></video>
      
      {/* 预加载其他视频，始终隐藏 */}
      {Object.values(videos).filter(url => url !== activeVideo).map(url => (
        <video
          key={url}
          className="w-full h-full object-cover hidden"
          src={url}
          preload="auto"
          muted
          loop={url === videos.cam1Fixed || url === videos.cam2Fixed}
        ></video>
      ))}
    </div>
  );
};

export default VideoPlayer;

方案三：用Poster占位图缓解视觉突兀 #

如果视频体积太大不适合预加载，可以给video标签添加poster属性，用对应视频的第一帧截图作为占位图，切换时先显示截图，直到视频加载完成。

修改VideoPlayer.jsx中的video标签：

// 先定义一个获取对应海报图的函数
const getVideoPoster = (videoUrl) => {
  switch(videoUrl) {
    case videos.cam1Fixed:
      return '/images/cam1-poster.jpg'; // 替换成你的海报图路径
    case videos.cam2Fixed:
      return '/images/cam2-poster.jpg';
    case videos.cam1Transition:
      return '/images/transition-poster.jpg';
    default:
      return '';
  }
};

// 然后在video标签中添加poster属性
<video
  onEnded={onEnded}
  className="w-full h-full object-cover"
  src={activeVideo}
  autoPlay
  muted
  loop={loop}
  poster={getVideoPoster(activeVideo)}
></video>

优先推荐前两个方案，能彻底解决白屏问题；第三个方案适合大视频场景，用于降低白屏的视觉冲击。

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