HTML 5 Video "autoplay" not automatically starting in CHROME

Question

I have the following code:

<video controls autoplay>
  <source src="video/myVideo.mp4" type="video/mp4"> 
  <source src="video/myVideo.webm" type="video/webm">
  <source src="video/myVideo.ogv" type="video/ogg">   </video>

The video:

displays well in both Chrome and Firefox
In Firefox it plays as expected
In Chrome it displays but not "autostarts". This is the problem.
If I click on it (in Chrome) it plays ok

Tried

<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>

Nothing worked in Chrome

Then I also tried changing the codec, as recommended in https://en.wikipedia.org/wiki/HTML5_video, but it also did not work:

<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

So now I am at a dead end. Thanks for any pointers! Much appreciated.

A little hack (add after ``): `` (don't forget to add `id="myvideo"` to ` — Sasindu Mendis, Jan 13 '16 at 11:07
True, did not think about js. The little hack worked. Thanks! — jon, Jan 13 '16 at 11:20
@SasinduMendis it appears this will only work after user interaction with the page (e.g. click). Any sooner and `play()` will be blocked by Chrome with a message in the console. — Pim Schaaf, Jun 09 '18 at 05:47
If you want to use the `autoplay` attribute the video must have: a **longer duration of 7 seconds**, **audio must be enabled**, the **tab must be active** and the video must have a **minimum size of 200x140px** — gmarsi, May 15 '19 at 21:14

score 172 · Accepted Answer · edited Mar 19 '21 at 10:51

172

You need to add playsinline autoplay muted loop because Chrome does not allow a video to autostart if it is not muted. Also, right now I don't know why it is not working in all Android devices. I'm trying to look if it's version specific, if I find something I'll let you know.

Chrome issue: After some research I have found that it doesn't work on Chrome sometimes because in responsive you can activate the data saver, and it blocks any video to autostart.

edited Mar 19 '21 at 10:51

Itchydon

2,572
6
19
33

answered Oct 02 '17 at 15:01

sebas sierra

1,856
1
11
5

1

Thank you for the info about the Data Saver, this was my issue. Have you found a way to overcome this? That is, if the data saver is still on, can the video autoplay somehow, maybe via JS? – Gru Nov 06 '18 at 17:59
Sorry, i could not find anything to fix it – sebas sierra Nov 08 '18 at 02:59
Why does chrome allow autostart on youtube? Is there an exception for youtube? – maxeh Apr 03 '19 at 19:29
@Max, chrome doesn't allow embedded youtube videos to autoplay. – Alexander Kim May 09 '19 at 06:04
@AlexanderKim I'm not talking about embedded videos. I was refering to youtube itself. When I open a youtube video there is autoplay. Maybe there is an exception for youtube? – maxeh May 12 '19 at 13:14
Just muted my video and Autopaly is working in chrome.. After reading your comment and I got it fixes.. Thank you very much @sebassierra – Bhavin Jun 30 '20 at 06:43

Vaibhav Kumar · Answer 2 · 2019-05-27T12:39:06.743

11

Try this when i tried giving muted , check this demo in codpen

    <video width="320" height="240" controls autoplay muted id="videoId">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

script

function toggleMute() {

  var video=document.getElementById("videoId");

  if(video.muted){
    video.muted = false;
  } else {
    debugger;
    video.muted = true;
    video.play()
  }

}

$(document).ready(function(){
  setTimeout(toggleMute,3000);
})

edited attribute content

autoplay muted playsinline

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

edited May 27 '19 at 12:39

answered May 23 '18 at 09:51

Vaibhav Kumar

768
4
12

1

Unmuting on timeout won't work anymore, you'll get an error: Unmuting failed and the element was paused instead because the user didn't interact with the document before – Alexander Kim May 09 '19 at 06:14
If the muted video is inserted dynamically into the DOM it doesn't autoplay for me in chrome after the page refresh because of "DOMException: play() failed because the user didn't interact with the document first". However, in such scenario you need to set the muted attribute to true manually after element insertion as described here https://stackoverflow.com/a/51189390/320761 – Lukasz Frankowski Feb 12 '20 at 16:08
1

After unmute, the video stops again. it's not correct – Tohid Zamani Dec 03 '21 at 23:46

score 7 · Answer 3 · answered May 14 '18 at 09:59

7

This may not have been the case at the time the question was asked, but as of Chrome 66, autoplay is blocked.

http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/

answered May 14 '18 at 09:59

extremeandy

503
3
13

score 6 · Answer 4 · answered Apr 28 '16 at 21:06

6

I was just reading this article, and it says:

Important: the order of the video files is vital; Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else.

So it looks like your problem would be solved if you put the .webm first in your list of sources. Hope that helps.

answered Apr 28 '16 at 21:06

ahutch

154
1
5

You completely saved my day with this. I can confirm this worked in Chrome 72 – Steve Nov 06 '18 at 16:12
Chrome 74, order doesn't matter. – Alexander Kim May 09 '19 at 06:05
Chrome 87.0.4280.88 (Official Build) (x86_64) here and my webm is first inline. Commenting out the other ``s made the webm fire. #strangebehavior – Ben Racicot Dec 14 '20 at 14:35

Yahya · Answer 5 · 2019-02-02T11:01:21.173

5

Try this:

<video src="{{ asset('path/to/your_video.mp4' )}}" muted autoplay loop playsinline></video>

And put this js after that:

window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});

edited Feb 02 '19 at 11:01

answered Dec 18 '18 at 14:12

Yahya

706
8
23

score 4 · Answer 6 · answered Jul 10 '19 at 13:52

These are the attributes I used to get video to autoplay on Chrome - onloadedmetadata="this.muted = true", playsinline, autoplay, muted, loop

Example:

<video src="path/to/video.mp4" onloadedmetadata="this.muted = true" playsinline autoplay muted loop></video>

D. Naumov · Answer 7 · 2018-08-02T15:36:08.277

3

This question are greatly described here
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

TL;DR You are still always able to autoplay muted videos

Also, if you're want to autoplay videos on iOS add playsInline attribute, because by default iOS tries to fullscreen videos
https://webkit.org/blog/6784/new-video-policies-for-ios/

edited Aug 02 '18 at 15:36

answered Aug 02 '18 at 14:07

D. Naumov

140
2
7

score 2 · Answer 8 · answered May 16 '18 at 12:50

Extremeandy has mentioned as of Chrome 66 autoplay video has been disabled.

After looking into this I found that muted videos are still able to be autoplayed. In my case the video didn't have any audio, but adding muted to the video tag has fixed it:

Hopefully this will help others also.

score -1 · Answer 9 · edited Nov 07 '16 at 18:28

-1

Here is it: http://www.htmlcssvqs.com/8ed/examples/chapter-17/webm-video-with-autoplay-loop.html You have to add the tags: autoplay="autoplay" loop="loop" or just "autoplay" and "loop".

edited Nov 07 '16 at 18:28

FelixSFD

6,052
10
43
117

answered Nov 07 '16 at 14:37

Vladislav

11

HTML 5 Video "autoplay" not automatically starting in CHROME

9 Answers9

Linked

Related