ReactPlayer初始加载/刷新时无法加载本地视频问题求助

可能的原因及修复方案 #

1. 修正本地视频路径引用方式 #

Create React App 中本地静态资源的引用有规范，直接写相对路径可能在初始加载时无法正确解析，可通过两种方式调整：

• 方式一：利用public目录
  将视频文件放入项目根目录的public/videos文件夹中，然后使用绝对路径引用：

return (
  <div>
    <ReactPlayer key={1} url={"/videos/1.mp4"} controls={true} />
  </div>
)

• 方式二：通过import引入资源
  在组件中直接导入视频文件，React会自动处理资源路径：

import video1 from './videos/1.mp4';

return (
  <div>
    <ReactPlayer key={1} url={video1} controls={true} />
  </div>
)

2. 强制触发组件重新渲染 #

初始加载时可能存在ReactPlayer未完成初始化的情况，可通过动态更新key值触发组件重新渲染：

import { useState, useEffect } from 'react';

function VideoPlayer() {
  const [playerKey, setPlayerKey] = useState(1);

  useEffect(() => {
    const timer = setTimeout(() => {
      setPlayerKey(prev => prev + 1);
    }, 100);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      <ReactPlayer key={playerKey} url={"/videos/1.mp4"} controls={true} />
    </div>
  )
}

3. 升级react-scripts版本 #

你当前使用的react-scripts@^2.1.3版本过旧，与React 18存在兼容性问题，建议升级到最新稳定版：

npm install react-scripts@latest
# 或使用yarn
yarn add react-scripts@latest

4. 手动设置预加载属性 #

添加preload="auto"属性，强制浏览器预加载视频元数据，确保初始加载时播放器能获取视频信息：

<ReactPlayer key={1} url={"/videos/1.mp4"} controls={true} preload="auto" />

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