HTML 视频属性在反应页面上不起作用答案

【问题标题】：HTML video attribute is not working on the react pageHTML 视频属性在反应页面上不起作用
【发布时间】：2021-04-15 13:49:24
【问题描述】：

所以我只是在设计一个基本的作品集，我希望视频在 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 本身内）。知道我在这里做错了什么吗？任何帮助将不胜感激！

【问题讨论】：

标签： javascript html css reactjs html5-video

【解决方案1】：

将所有视频放在 Public/Videos 中，然后通过以下方式访问它：

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

问题得到解决！ :)

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

【讨论】：