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

Last Comment

lenamtl

8/22/2022 - Mon

ASKER CERTIFIED SOLUTION

Zakaria Acharki

1/21/2019

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

1/21/2019

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.

Certified Expert Program

Credly Partnership

Udemy Partnership