Avatar of Ahmed Musawir
Ahmed Musawir
 asked on

Using HTML5 video on a React App in such a way that it will work on all Mobile platforms (iOS, Android, MS etc.), esp, making the auto start working at page load.

I'm trying to use HTML5 video in my React App the following way:

<Section gridStart="1366px" bgColor="gradient" type="flex">
          <Block flexBasis="70">
            <video width="100%" autoPlay loop>
              <source src="/videos/ai-vid.mp4" type="video/mp4" />
            </video>
          </Block>
          <Block flexBasis="30">
            <Paragraph>
              <Fade bottom cascade>
                <H2 light>Accessibility</H2>
                <H4 light>
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                  Molestias dolores quia sit harum accusamus quaerat
                  repudiandae.
                </H4>
              </Fade>
            </Paragraph>
          </Block>
        </Section>

Open in new window


But this will not auto start when the page loads the first time. But when I visit another page and come back to the home page, the video works. Any idea what's happening? Any suggestions to make it work properly and esp on mobile devices will be appreciated.
HTMLJavaScript* ReactJS* html5 video

Avatar of undefined
Last Comment
lenamtl

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Zakaria Acharki

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
lenamtl

Hi,

1-always add a poster to your video so at least user will see an image.

2-you need to provide several video format in the source because browser can support different format

3-And autoplay will not occurred most of the time because browser policy and user preference (battery life, security, user experience etc)

See ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes

<video width="620" controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi">
  Your browser doesn't support HTML5 video tag.
</video>

Open in new window

Your help has saved me hundreds of hours of internet surfing.
fblack61