尝试在 videojs 中播放视频时无法加载媒体错误

Question

我在我的 React 项目中使用了 videojs。我正在尝试从本地路径播放视频。但是当我尝试这样做时出现错误。这是我给视频源的路径，我也附上了项目结构。

 <video id="myvideo" src="./src/pages/VideoScreen/CarChase.mp4" type="video/mp4"/>

这是我的项目结构

这是我的错误

还有为什么我的 .mp4 文件是红色的。有什么问题吗？

我也在我的 webpack 中添加了这些加载器来尝试

{
    test: /\.html$/,
    loader: 'html-loader?attrs[]=video:src'
}, {
    test: /\.mp4$/,
    loader: 'url?limit=10000&mimetype=video/mp4'
},

但这也没有用。我给的路径有误吗？

Answer 1

url 加载程序不适用于 jsx 中的 src 属性。您必须像这样导入视频文件：

import videoSrc from './src/pages/VideoScreen/CarChase.mp4';

//...

id="myvideo"
src={videoSrc}
type="video/mp4"

The media could not be loaded error when trying to play a video in videojs