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

Question

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

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

这是我的项目结构

这是我的错误

{{3}}

也是为什么我的.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"