Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs React本地视频未在生产中加载_Reactjs_Html5 Video_Aws Amplify_React Player - Fatal编程技术网

Reactjs React本地视频未在生产中加载

Reactjs React本地视频未在生产中加载,reactjs,html5-video,aws-amplify,react-player,Reactjs,Html5 Video,Aws Amplify,React Player,我正在尝试循环src/Assets/videos中包含的一个非常简单的视频 当我使用npm start部署本地服务器时,视频将按预期执行,但是,当我发布到生产时,视频不会加载。我正在使用AWS Amplify CLI发布应用程序 我试着: 1). 在其他浏览器(Firefox和Chrome)中查看应用程序。 2). 通过环境变量从/public加载视频。 3). 通过react播放器模块加载视频 我的初始代码是在app.js中呈现的home.js组件: import heroVideo from

我正在尝试循环src/Assets/videos中包含的一个非常简单的视频

当我使用npm start部署本地服务器时,视频将按预期执行,但是,当我发布到生产时,视频不会加载。我正在使用AWS Amplify CLI发布应用程序

我试着:
1). 在其他浏览器(Firefox和Chrome)中查看应用程序。
2). 通过环境变量从/public加载视频。
3). 通过react播放器模块加载视频

我的初始代码是在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>
    )
}
从“../../Assets/videos/heroVid.mp4”导入Herovide;
//...
导出默认函数主页(){
返回(
您的浏览器不支持视频标记。
QC置业公司
QC总承包商
让我们一起建设你的未来
请求报价
)
}
然后我试着:

导出默认函数主页(){
返回(

我也遇到了同样的问题,我找到的最简单的解决方案是在AWS上创建一个S3 bucket并上传视频文件,然后从视频中获取src。你还必须为你的bucket/对象添加公共读取权限。

你修改了重写规则以添加mp4吗

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

Did@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"
      />

</^[^.]+$|\.(?!(css|mp4|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> 
      <ReactPlayer
        url='https://xxx.s3.us-east-2.amazonaws.com/xxx-background.mp4'
        playing={true}
        loop={true}
        muted={true}
        controls={false}
        id="background_video"
      />