如何在React.js中使用HTML5 video标签播放视频？视频无法加载求助

开发者阿泽

2026-7-13

React中HTML5 Video标签无法加载视频的解决办法

问题详情

在React.js项目中使用HTML5 video标签时，仅能显示播放器框架，视频无法加载。调整src路径为../Videos/video1.mp4后问题仍未解决，组件代码如下：

const Video = () => {
    return (
      <div className="App">
      <p>hello</p>
      <video width="350" height="350" controls loop autoplay muted>
      <source src="/Videos/myvideo.mp4" type="video/mp4"/>
     </video>
      </div>
    );   
}
export default Video

可能的原因及解决方法

静态资源目录位置错误
React项目的静态资源默认需要放在根目录的public文件夹下。如果你的Videos文件夹不在public内，打包工具无法正确解析路径。将Videos文件夹移动到public目录下，此时使用/Videos/myvideo.mp4作为src路径即可正常加载。
路径或文件名不匹配
检查视频文件名和路径的拼写是否完全一致，注意Linux/macOS环境下路径区分大小写。比如代码中写的是myvideo.mp4，实际文件是video1.mp4，就会导致加载失败。

使用import引入src目录下的资源
若视频文件放在src目录的子文件夹中，可通过import方式引入资源，让打包工具自动处理路径：

import myVideo from './Videos/myvideo.mp4';

const Video = () => {
    return (
      <div className="App">
      <p>hello</p>
      <video width="350" height="350" controls loop autoplay muted>
      <source src={myVideo} type="video/mp4"/>
     </video>
      </div>
    );   
}
export default Video