我正在尝试循环播放 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>
)
}
然后我尝试load from /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>
)
}
最后react-player :
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>
)
}
我对 React 和 AWS Amplify 还是比较陌生 - 我是否遗漏了什么? 在此先感谢您的指导。
最佳答案
您是否修改了重写规则以添加 mp4?
</^[^.]+$|\.(?!(css|mp4|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
关于reactjs - React 本地视频不会在生产中加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65236218/