HTML5 Video autoplay not working

16
votes

I have been looking into how to implement HTML5 videos as a background video on web and mobile, below is the following code- it displays but not autostarts, this is the problem

<video width="100%" controls autoplay>
  <source src="video/342125205.mp4" type="video/mp4">
  <source src="video/342125205.ogg" type="video/ogg">
</video>
5
htmlhtml5-video
Show your video tag with all attributes you are using. - Baumi
Are you testing on desktop or mobile? - j08691
Did you test in wich browser ? - Pv-Viana
on desktop i am using chrome browser - Manoj Singh
Try muted to see if it is autoplaying like so <video width="100%" controls autoplay muted> - August

5 Answers

46
votes

Depending on your Chrome version you might get the new implementation of video autoplay rules:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
    • On mobile, the user has added the site to his or her home screen. Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

Taken from: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

So you can try it muted:

<video width="100%" controls autoplay muted>
  <source src="video/342125205.mp4" type="video/mp4">
  <source src="video/342125205.ogg" type="video/ogg">
</video>
13
votes

I had similar issues with autoplay not having any effect regardless of usage of muted. Unexpectedly I had success when specifying autoplay as camel case autoPlay

3
votes

In React you need to add the attributes of tags in camelCase. So in this case It has to be autoPlay.

0
votes

It's too old thread now. But still I have a suggestion if you want to use. Instead of the autoplay attribute(because other told it's only work always if it also has muted) you could use one thing:-

function playVideo()
{
    document.getElementById("vid").play();
}

a very simple function in javascript. Make sure to give your video Id 'vid' or change it here. Video Example

<video id="vid" loop controls>
        <source src="Videos/vid.mp4" type="video/mp4">
</video>

and in body tag write this:-

<body onpageshow="playVideo()">

It worked for me. Maybe for you too

0
votes

Make sure you check browser permissions. If the site is not secure (http), then autoplay on websites will be disabled. To make changes you can click on the left side of the Address Bar of the browser and click Allow audio and video.