CODEWITHSUNDEEP
javascripthtmlreactjshtml5-video
Sam
Sam

Reputation: 2351

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

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

(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?

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.

Upvotes: 7

Views: 19966

Answers (6)

usmannoor90
usmannoor90

Reputation: 121

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>

Upvotes: 1

vonFediuc
vonFediuc

Reputation: 117

I made it work like this:

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

I hope it helps.

Upvotes: 1

S&#233;rgio Carneiro
S&#233;rgio Carneiro

Reputation: 3966

Make sure battery-saving mode is OFF

That was my problem...

Upvotes: 6

Abraham
Abraham

Reputation: 15830

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

Upvotes: 2

JonayahJ
JonayahJ

Reputation: 51

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.

Upvotes: 5

Sam
Sam

Reputation: 2351

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>
   )
}

Upvotes: 10

Related Questions