React 本地视频不会在生产中加载答案

【问题标题】：React local video does not load in productionReact 本地视频不会在生产中加载
【发布时间】：2021-03-21 23:25:20
【问题描述】：

我正在尝试循环包含在 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>
   )
}

我对 AWS Amplify 的反应还是比较陌生 - 我有什么遗漏吗？提前感谢您的任何指导。

【问题讨论】：

标签： reactjs html5-video aws-amplify react-player

【解决方案1】：

我也遇到了同样的问题，我找到的最简单的解决方案是在 AWS 上创建一个 S3 存储桶并将视频文件上传到那里并从所述视频中获取 src。您还必须为您的存储桶/对象添加公共读取访问权限。

【讨论】：

【解决方案2】：

您是否修改了重写规则以添加 mp4 ？

</^[^.]+$|\.(?!(css|mp4|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

【讨论】：

【解决方案3】：

@jsc31994 推荐了吗：

将视频上传到 S3 存储桶上，然后使用 ReactPlayer

      <ReactPlayer
        url='https://xxx.s3.us-east-2.amazonaws.com/xxx-background.mp4'
        playing={true}
        loop={true}
        muted={true}
        controls={false}
        id="background_video"
      />

【讨论】：