HTML视频属性在react页面上不起作用

Question

所以我只是在设计一个基本的公文包，我希望在div的背景中自动循环播放视频。为了做到这一点，我在这里和那里做了一些修改。长话短说，由于某些原因，我的视频没有出现。如果你们知道这里发生了什么，请告诉我。

App.js：

class App extends Component {
render(){
return(
<div>
<div className="container-fluid">
<div className="row">
<div className="startBackground">
<video autoPlay muted loop>
<source src="images/timelapse.mp4" type="video/mp4" />
</video>
<HeaderJumbotron/>
</div>
</div>
</div>
</div>
)
}
}

标题jumbotron只是另一个组件，它将包含我想在这个背景视频上显示的文本。它将充当我的字幕类。

index.css：

.startBackground {
width: 100%;
height: 100%;
padding: 20px;
margin-top: 20px;
position: relative;
}
.startBackground video {
width: 100%;
height: 300px;
position: absolute;
object-fit: cover;
z-index: 0;
}

timelapse.mp4位于src文件夹中的images文件夹中。所有其他文件(index.js、app.js、index.css等都在src内部(。知道我在这里做错了什么吗？如有任何帮助，我们将不胜感激！

Answer 1

将您的所有视频放在公共/视频中，然后通过以下方式访问：

<video autoPlay muted loop>
<source src="/Videos/timelapse.mp4" type="video/mp4" />
</video>

问题解决了！：(

注意：不要忘记在路径的开头添加/。