我正在尝试循环包含在 src/Assets/videos 中的一个非常简单的视频。
当我使用 npm start 部署本地服务器时,视频按预期执行,但是,当我发布到生产环境时,视频不会加载。我正在使用 AWS Amplify CLI 发布应用程序。
我试图:
1)。在不同的浏览器(Firefox 和 Chrome)中查看应用程序。
2)。通过环境变量从 /public 加载视频。
3)。通过 react-player 模块加载视频。
我的初始代码是在 app.js 中呈现的 home.js 组件:
import heroVideo from '../../Assets/videos/heroVid.mp4';
//...
export default function HomePage() {
return (
<div id="hero" align="center" className="center">
<div>
<video muted autostart autoPlay loop >
<source src={heroVideo} type="video/mp4"/>
Your browser does not support the video tag.
</video>
</div>
<div style={{width: '90%'}}>
<div>
<img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
<h4>A QC HOME BUYERS COMPANY</h4>
<h1>QC General Contractors</h1>
<h2 className="script">Let's build your future together</h2>
<NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
</div>
</div>
</div>
)
}
然后我尝试从 /public 加载:
export default function HomePage() {
return (
<div id="hero" align="center" className="center">
<div>
<video src={process.env.PUBLIC_URL + 'Videos/heroVid.mp4} muted autostart autoPlay loop />
</div>
<div style={{width: '90%'}}>
<div>
<img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
<h4>A QC HOME BUYERS COMPANY</h4>
<h1>QC General Contractors</h1>
<h2 className="script">Let's build your future together</h2>
<NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
</div>
</div>
</div>
)
}
最后反应播放器:
import heroVideo from '../../Assets/videos/heroVid.mp4';
import ReactPlayer from 'react-player'
//...
export default function HomePage() {
return (
<div id="hero" align="center" className="center">
<div>
<ReactPlayer url={heroVideo} loop="true" volume="0" muted="true" playing="true" style={{height: "100%"}} />
</div>
<div style={{width: '90%'}}>
<div>
<img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
<h4>A QC HOME BUYERS COMPANY</h4>
<h1>QC General Contractors</h1>
<h2 className="script">Let's build your future together</h2>
<NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
</div>
</div>
</div>
)
}
我对反应和 AWS Amplify 的反应还是比较陌生 - 我有什么遗漏吗?提前感谢您的任何指导。