Блог

Главная - Вопросы по программированию - Локальное видео React не загружается в рабочую среду

Локальное видео React не загружается в рабочую среду

#reactjs #html5-video #aws-amplify #react-player

#reactjs #html5-видео #aws-amplify #react-проигрыватель

Вопрос:

Я пытаюсь зациклить очень простое видео, содержащееся в src / Assets / videos.

Когда я развертываю локальный сервер с запуском npm, видео работает так, как ожидалось, однако, когда я публикую в рабочей среде, видео не загружается. Я использую AWS Amplify CLI для публикации приложения.

Я пытался:
1). Просмотрите приложение в другом браузере (Firefox и Chrome).
2). Загрузите видео из /public через переменную среды.
3). Загрузите видео через модуль react-player.

Мой первоначальный код был home.js компонент, отображаемый в app.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>
    )
}

Наконец, 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 — есть ли что-то, чего мне не хватает?
Заранее спасибо за любые рекомендации.

Ответ №1:

Изменили ли вы свои правила перезаписи, чтобы добавить mp4?

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

Комментарии:

1. </^[^.] $|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|mp4)$)([^.] $)/> используйте это вместо, если сохранит перезагрузки в одностраничном веб-приложении

Ответ №2:

У меня тоже была такая же проблема, самым простым решением, которое я нашел, было создать корзину S3 в AWS, загрузить туда видеофайл и получить src из указанного видео. Вам также придется добавить общедоступный доступ для чтения для вашего корзины / объекта.

Ответ №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"
      />