React (HTML) video tag won't autoplay on mobile devices

Question

I created a jsx variable to embed a video into my html. Every other answer says to include

• muted
• defaultMuted, and
• playsinline

(which I already have).

---

The videos autoplay in safari, chrome and firefox on my computer, but not on mobile.

The start screen of the video loads, but it is paused.

Do I maybe need to do it slightly differently because I'm using React?

---

• I'm using an iPhone on iOS 13.3,
• the autoplay isn't working on safari, chrome and firefox, but only on mobile.
• The videos are all .mp4(.mov files also don't work).

var EmbedVideo = function(props) {
     return (
     <video webkit-playsinline playsinline autoplay="autoplay" className={props.className} muted defaultMuted loop>
            <source src={props.src} type="video/mp4" />
            Your browser does not support the video tag.
        </video>
    )
}

---

Update

So apparently 'muted' doesn't show up when I inspect the html of my website. The node looks like this. There's a few attributes that are missing actually.

    <video autoplay="" class="video" loop="">
    <source src="/videos/my_video.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>

I'm reading something about the muted attributed not working with React? Someone made a component that looks like it's the video tag, but functioning how it's supposed to(at least in my case with videos playing like gifs). I can't get it working though, it's not even autoplaying on Desktop. I'm trying just <VideoTag src={props.src} /> because I don't know what their poster variable is supposed to be.

Finch

I think you should use autoPlay not autoplay – Timon

@Timon Didn't work. I tried autoplay="autoPlay", autoPlay="autoplay", and autoPlay="autoPlay". Which one did you mean? – Finch

@Timon which one do you mean, it's possible that I messed something else up when attempting, or there was a cache issue or something, I don't want to try all three repeatedly when I'm testing these separate issues – Finch

If I recall correctly the default behavior on mobile is to ignore autoplay in order to conserve bandwidth. – Profane

@Profane Could you explain this more? I just got it working by using dangerouslySetInnerHTML. I was using gifs before, but some of the gifs were about 20 MB, and lower quality. The corresponding mp4's are about 2 MB maximum and most were about half a MB, and better quality so it just seems like a much better option. Plus isn't the mp4 already downloaded when it's displayed with the html?(it's not an embedded youtube link) – Finch

Answer 1

It looks like muted does not work properly when using React. I had to use something called dangerouslySetInnerHTML in order for muted to show up in the component.

var EmbedVideo = function(props) {
   return (
       <div dangerouslySetInnerHTML={{ __html: `
        <video
          loop
          muted
          autoplay
          playsinline
          src="${props.src}"
          class="${props.className}"
        />,
      ` }}></div>
   )
}

Finch

wht does the playsinline prop do? – Aretino

With "playsinline" in place, mobile browsers will play the video right where it is instead of the default, which is to open it up to fullscreen while it plays - css-tricks.com/what-does-playsinline-mean-in-web-video – Kiblah

@doublejosh What are you trying to say? With dangerouslySetInnerHTML, the attributes for video should all be lowercase, it's html, not jsx – Finch

muted works if you type it as muted="true". Using the string true sends the attribute to the DOM now – Curiosity

Answer 2

Make sure battery-saving mode is OFF

That was my problem...

Hazardous

Thank you! That was the issue! QA was reporting that autoplay was not working and I could make it work on my iphone. Once they disabled battery-saving it worked. – Helicline

Answer 3

I just had the same issue and thought I'd share my solution, hoping that it helps others and saves you time and many headaches.

So, I created a component for the video and added in autoPlay and playsInline, paying special attention to capitalization.

Here's the JSX code that I used:

<VideoBG 
    autoPlay={true} 
    loop={true}
    controls={false} 
    playsInline
    muted 
    src="../../videos/video4.mp4" 
    type="video/mp4" 
 />

Here's the styling (styled components, but basically css) that I used:

export const VideoBG = styled.video`
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
`;

The ={true} might not be necessary, but just in case, this worked for me.

Deiform

can you show how you made the custom component? – Sackville

I primarily used styled-components when working on this project. To do so, you need to import styled from "styled-components" in the file where you are creating the styles for your component (basically, using JSX to style instead of CSS). It's a lot to explain in a comment, but this tut video explains how to use react styled-components: youtube.com/watch?v=Nl54MJDR2p8&t=1s – Deiform

Answer 4

This solved it for me

• Use autoPlay instead of autoplay for react.
• Add muted

if you want to use the autoplay with small letters, you should assign the value autoplay="true"

Here is a live code for testing

Homemade

This might be new, I don't think this worked when I asked the question, so my answer might be outdated... if someone could confirm this that would be great – Finch

@Sam, here is a demo code that shows this in action to confirm it. codesandbox.io/s/vigorous-mahavira-uhb45 – Homemade

The demo codes shows that this solution is not working. – Syllogism

Answer 5

I made it work like this:

<video className="landing-video" src={mp4} autoPlay="autoplay" playsInLine="playsinline" loop="true" muted="true"/>

I hope it helps.

Dias

Out of all the answers and solutions from this thread; this fix was by far the most simple and worked the best! I really appreciate it! playsInLine="playsinline" By putting the video properties in attribute/value format; worked instantly and made a huge difference! God bless and thanks! – Tierza

Answer 6

I don't know if it is helpful. I have added true at the end of each property. then it worked for me.

  <video
    ref={videoRef}
    className="w-full xl:h-[1100px] lg:h-[830px] md:h-[650px] h-[600px] object-cover "
    onTimeUpdate={handleProgress}
    loop={true}
    muted={true}
    autoPlay={true}
    playsInline={true}
  >
    <source src="videos/herovideo.mp4" type="video/mp4" />
    Your browser does not support the video tag.
  </video>

Portemonnaie