Reputation: 2978

Video autoplay not working - Trying to find a fix

I have a video background in React. I want it to autoplay. Autoplay does not work.

I have tried:

autoplay
autoPlay
autoPlay="autoplay"

What I find particularly odd is that occasionally, it WILL work. But then it will stop.

Here is the code as it is right now.

<video loop autoPlay>
       <source src={require('../../videos/background.mp4')} type="video/mp4" />
</video>

Here is the entire section of the component. I'm using a transition, but as of last week, it didn't impact it.

<div className="video-background">
    <Transition in={true} timeout={1000} appear={true}>
        {(state) => (
          <div id="banner" className="video-foreground" style={{ 
                            ...transitionStyles[state]
                        }}>
                        <video loop autoPlay>
                            <source src={require('../../videos/background.mp4')} type="video/mp4" />
                        </video>
          </div>
        )}
     </Transition>
  </div>

Upvotes: 75

Answers (15)

Kishan Vasani

Reputation: 1

this is work in my case issue was i have not added muted with autoPlay

  <video
        className="body-overlay"
        loop={true}
        autoPlay
        controls
        muted={true}
      >
        <source src={video} type="video/mp4" />
      </video>

Upvotes: 0

Artemesian

Reputation: 449

if you don't want to mute the video, consider the following reverse approach:

Mute and later unmute in useEffect.

import React, { useEffect, useRef } from "react";
...

const vidRef = useRef();

useEffect(() => {
   vidRef.current.muted = false;
 }, []);

...
<video autoPlay controls loop muted ref={vidRef}>
    <source
       src={"/url_to_video.mp4"}
       type="video/mp4"
    />
</video>
...

Works 100%

Upvotes: 4

Sergio Reis

Reputation: 3286

Well in my case added muted property.

Try this:

<video ... autoPlay muted />

Chrome 66 stops autoplay of all video that don't have the muted property.

Upvotes: 179

Labhansh Satpute

Reputation: 449

It works only when the video is muted so please add muted attribute

<div>
    <video src="/assets/loading.mp4" loop autoPlay muted className="h-[300px] w-auto" ></video>            
</div>

Upvotes: 5

Navin Negi

Reputation: 1

import video from 'src/../../video'
    
<video muted autoPlay loop>
      <source src={video} />    
</video>

Upvotes: -1

Precious

Reputation: 1

I think the order in which you have it makes a difference too. I had autoPlay loop muted control and the video only worked on the computer with the control. Once I did muted autoPlay the video then played played on it's own as well as on mobile!

Upvotes: -1

Amarildo Lena

Reputation: 64

Adding somethigs in the video body it works in my case.

<video
   src="/assets/videos/presentation.mp4"
   muted
   autoPlay
   loop >
      My brand like image alt
</video>

Upvotes: -1

parsamanesh

Reputation: 69

I used useRef and the problem of not playing the video was solved.

const vidRef=useRef();

useEffect(() => { vidRef.current.play(); },[]);

<video
  src="/videos.mp4"
  ref={ vidRef }
  muted
  autoPlay
  loop 
/>

Upvotes: 6

Farish.py.js

Reputation: 9

This code gives you the solution

<video
  src="/videos.mp4"
  controls
  muted
  autoPlay={"autoplay"}
  preLoad="auto"
  loop 
 > </video>

Upvotes: -1

Muhammad Awais

Reputation: 97

if you are facing this issue ,try this it will work 100%

<video
          src="/videos/ab.mp4"
          controls
          muted
          autoPlay={"autoplay"}
          preLoad="auto"
          loop
        > something</video>

Upvotes: -1

Majdi Mohammad

Reputation: 167

Well.. You can try this

autoplay=""

Like this

<video autoplay="">
       <source src={require('../../videos/background.mp4')} type="video/mp4" />
</video>

Upvotes: -1

Gabriel Duete

Reputation: 129

Try <video loop muted autoPlay controls = ''> ... </video>

Apparently, when placing the controls, it is possible to play the video, then placing the controls = '', we can remove the buttons from the controls and autoPlay works again.

Upvotes: 9