React中video标签视频播放及动态更新src问题求助

一、视频播放的其他实现方式 #

• 直接使用public目录静态路径
  把视频文件放到项目根目录的public文件夹（比如public/videos/video.mp4），直接写绝对路径即可：

  <video className='myVideo' src="/videos/video.mp4" controls></video>
  

  这种方式无需require，create-react-app会自动处理public目录下的静态资源。

• 提前import导入视频文件
  在组件顶部先导入视频资源，之后直接用变量作为src值：

  import videoSrc from './../video/video.mp4';
  
  function VideoPlayer() {
    return (
      <video className='myVideo' src={videoSrc} controls></video>
    );
  }
  

• 使用第三方视频播放器库
  比如react-player，支持自定义控件、多平台视频源等丰富功能，先安装依赖：

  npm install react-player
  

  然后这样使用：

  import ReactPlayer from 'react-player';
  
  function VideoPlayer() {
    return (
      <ReactPlayer url={require('./../video/video.mp4')} controls />
    );
  }
  

二、动态更新视频源报错的解决办法 #

你遇到的「Critical dependency: the request of a dependency is an expression」错误，是因为Webpack打包时无法解析动态的require表达式——它需要在编译阶段明确知道要打包的资源，动态字符串会让它无法确定依赖范围。

1. 已知所有可能的视频文件（数量有限） #

提前导入所有可能用到的视频，用状态变量切换即可：

import video1 from './../video/video1.mp4';
import video2 from './../video/video2.mp4';

function VideoPlayer() {
  const [currentVideo, setCurrentVideo] = useState(video1);

  const switchVideo = () => {
    setCurrentVideo(video2);
  };

  return (
    <>
      <video className='myVideo' src={currentVideo} controls></video>
      <button onClick={switchVideo}>切换视频</button>
    </>
  );
}

2. 视频数量多或从后端获取路径 #

把视频文件放到public目录下，用状态变量存储绝对路径直接切换：

function VideoPlayer() {
  const [currentVideo, setCurrentVideo] = useState("/videos/video1.mp4");

  const switchVideo = () => {
    setCurrentVideo("/videos/video2.mp4");
  };

  return (
    <>
      <video className='myVideo' src={currentVideo} controls></video>
      <button onClick={switchVideo}>切换视频</button>
    </>
  );
}

3. 必须使用动态require的场景（不推荐） #

如果一定要用动态require，需要给Webpack一个明确的路径前缀，让它预打包该目录下的所有文件：

function VideoPlayer() {
  const [videoName, setVideoName] = useState("video1");

  // 注意：路径前缀必须固定，不能全为变量
  const videoSrc = require(`./../video/${videoName}.mp4`);

  return (
    <video className='myVideo' src={videoSrc} controls></video>
  );
}

这种方式会让Webpack打包./../video目录下所有.mp4文件，若目录内文件较多会增大打包体积，谨慎使用。

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