React中如何通过参数传递路径播放本地视频？

问题原因 #

Webpack在打包时会静态分析require的参数，只有明确的字符串路径才能被识别并将对应资源打包到输出目录。当使用动态变量（比如组件传入的video参数）时，Webpack无法提前预知需要打包哪些资源，因此会抛出模块找不到的错误。

解决方法 #

方法1：手动构建资源映射表

提前将所有需要用到的视频通过require导入，建立路径到资源的映射，组件中通过参数匹配对应资源：

// 预定义所有视频资源的映射
const videoResources = {
  'static/content/sample_video.mp4': require('static/content/sample_video.mp4'),
  // 添加其他视频路径及对应的require语句
};

export default function Video({ video }) {
  return (
    <>
      <video controls width="100%">
        <source src={videoResources[video]} type="video/mp4" />
      </video>
    </>
  );
}

方法2：用require.context批量导入

如果视频都集中在同一个目录，可通过Webpack的require.context自动批量导入该目录下的所有视频，无需手动维护映射表：

// 创建上下文，扫描static/content目录下的所有mp4文件
const videoCtx = require.context('static/content', false, /\.mp4$/);

// 生成路径到资源的映射
const videoMap = videoCtx.keys().reduce((acc, relativePath) => {
  // 转换路径格式，和传入的video参数匹配
  const fullPath = `static/content/${relativePath.replace('./', '')}`;
  acc[fullPath] = videoCtx(relativePath);
  return acc;
}, {});

export default function Video({ video }) {
  return (
    <>
      <video controls width="100%">
        <source src={videoMap[video]} type="video/mp4" />
      </video>
    </>
  );
}

方法3：将视频放到public目录直接引用

把视频文件移到项目的public目录下（比如public/static/content/sample_video.mp4），此时可以直接用路径作为src，无需使用require：

export default function Video({ video }) {
  return (
    <>
      <video controls width="100%">
        <source src={`/${video}`} type="video/mp4" />
      </video>
    </>
  );
}

注意此时传入的video参数应为static/content/sample_video.mp4，对应public目录下的绝对路径。

内容的提问来源于stack exchange，提问作者Antón Soares Rial