我无法让我的背景视频显示在我的 React 主页上

Question

我正在尝试为我的 React 项目的主页创建一个自动播放 mp4 的英雄 - 我在控制台中没有错误，但仍然没有视频。

我三次检查了文件路径，当我进入资产文件夹时视频播放正常，但什么也没有。

任何帮助将不胜感激

从“react”导入React； 导入'../../App.css'

常量样式= { 英雄风格：{ 显示：'弯曲'， justifyContent: '中心', 宽度：'100%'， 高度：'100%' },

containerStyle: {
    position: 'absolute',
    top: '0',
    right: '0',
    bottom: '0',
    left:'0',
    overflow: 'hidden',
    width: '100%',
    height: '100%',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center', 
},

}

函数 Home() { 返回（

<div className="hero" style={style.heroStyle}>
  <div className="video-container" style={style.containerStyle}>
    <video width="100%" loop autoplay muted>
    <source src="../../assets/video/Timeline1.mp4" type="video/mp4"/>
    <source src="../../assets/video/TimeLine1.mp4" type="video/webm"/>
    </video>
    </div>
</div>

）； }

导出默认首页；

Answer 1

不要在视频源中使用相对路径，而是使用变量。看看下面的代码。

import video from '../../assets/video/Timeline1.mp4';



export default function App(){

return(

<div className="hero" style={style.heroStyle}>
  <div className="video-container" style={style.containerStyle}>
    <video width="100%" loop autoplay muted>
    <source src={video} type="video/mp4"/>
    <source src={video} type="video/webm"/>
    </video>
    </div>
</div>
)


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>