Video auto play is not working in Safari and Chrome desktop browser

Question

I spent quite a lot of time trying to figure out why video embedded like here:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

starts playing automatically once the page is loaded in FireFox but cannot do autoplay in Webkit based browsers. This only happened on some random pages. So far I was unable to find the cause. I suspect some unclosed tags or extensive JS created by CMS editors.

Solution 1

The best fix I could get was adding this code just after the </video>

<script>
    document.getElementById('vid').play();
</script>

...not pretty but somehow works.

UPDATE Recently many browsers can only autoplay the videos with sound off, so you'll need to add muted attribute to the video tag too

<video autoplay muted>
...
</video>

Solution 2

After using jQuery play() or DOM maniupulation as suggested by the other answers, it was not still working (Video wasn't autoplaying) in the Chrome for Android (Version 56.0).

As per this post in developers.google.com, From Chrome 53, the autoplay option is respected by the browser, if the video is muted.

So using autoplay muted attributes in video tag enables the video to be autoplayed in Chrome browsers from version 53.

Excerpt from the above link:

Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both autoplay and muted are set[...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• Muted autoplay is supported by Safari on iOS 10 and later.
• Autoplay, whether muted or not, is already supported on Android by Firefox and UC Browser: they do not block any kind of autoplay.

Solution 3

Google just changed their policy for autoplay videos, it has to be muted

You can check here

so just add muted

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Solution 4

It happens that Safari and Chrome on Desktop do not like DOM manipulation around the video tag. They will not fire the play order when the autoplay attribute is set even if the canplaythrough event has fired when the DOM around the video tag has changed after initial page load. Basically I had the same issue until I deleted a .wrap() jQuery around the video tag and after that it autoplayed as expected.

Solution 5

For me the issue was that the muted attribute needed to be added within the video tag. I.e.:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

View more solutions

Comments

[tanaydin]

is it working sometimes ? or not working at all... here is an example w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autopla‌​y that i check with chrome, and it works.

[Adam Bubela]

On some pages it is not working at all

[bingeScripter]

Facing the same issue, worked fine a week ago and without any change it just stopped working. Maybe it's a browser update, very annoying to have to manually play all the video tags via javascript

[Bob the Builder]

Not working for me in Chrome.

[Penguin]

Or you can code with jQuery $("videoID").get(0).play(); stackoverflow.com/questions/4646998/…

[mattsoave]

Good call that it doesn't work with .wrap(). However, as far as I can tell, the code needs .get(0) to work: $("#vid").get(0).play();

[pmrotule]

@mattsoave .get(0) or just $('#vid')[0].play()

[From Orbonia]

Nothing worked on Chrome worked for me either. With the .play() fix (hack) above I was getting a "Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()." in the console. There was a few other jQuery functions on the page, so thought that a timer would give Chrome enough time to sort itself out. It worked. I set a 0.5 second timer in $( document ).ready()

[dmbaughman]

I had this issue in Safari 11 where a background video (no audio) wouldn't play automatically. Adding muted and autoplay did the trick. Thanks!

[Don Cullen]

Oct 2017, video not autoplaying in spite of attribute in tag is still an issue in Safari. Using [0].play() as suggested by mattsoave/pmrotule solved the issue.

[Martin Ille]

Or like this: $("video[autoplay]").each(function(){ this.play(); });

[Rip3rs]

reason is because you are waiting for the video to be loaded within the buffer then you play it.

[dovid]

still problem if its not muted developers.google.com/web/updates/2017/09/…

[webkit]

this won't work anymore without user interaction AFAIK

[vladkras]

Works for latest Chrome on Windows8

[Doomjunky]

John Pallett's comment on the new policy. He is Google Chrome's Product Manager and Media Muter.

[lisarko8077]

On Crome if i add muted disable sound. I don't want this

[Leandro H Agostinho]

see this stackoverflow.com/questions/43570460/…

[Sedat Başar]

The preload attribute is ignored by browser if autoplay is present.

[Samuel Philipp]

That doesn't add anything new. The accepted answer already mentions this. Also the second answer goes into detail.

[Xavier]

So why then does autoplay, WITH sound on, work for youtube? It has worked that way since the site's inception.

[Alex Angelico]

the video is muted, check the question

[Tilak Madichetti]

works in Chrome 2020 but tbh this hack can be the only reason chrome should stop invalidating autoplay

[Gman]

To work on Safari mobile, I also had to include playsinline

[Ponyboy]

In my case, this still didn't work (Angular 11.2) in Chrome. In the code I checked the video elements muted value and it was still set to false. Manually changing it to true fixed the issue. Example: const videoElm = this.backgroundVideo.nativeElement as HTMLVideoElement; videoElm.muted = true;

[Joshua Wolff]

Wow, this worked for me! Did not expect that

[Omar]

This worked for me in 2021

[Sych]

This answers points the core problem with autoplay of videos. The rule of thumb is that nothing on page can do sounds automatically, without prior user interaction. Muting makes autoplay on page load possible.

[Arman Samimi]

autoplay="true" muted="true" , it works for me, thanks

[Fazal Jarral]

Muted somehow works

[Ale]

To be a bit more specific here: the code above waits for 1 second (1000ms) and then plays the video. It doesn't wait for the video to be loaded as it doesn't know when the video is done. To get the correct moment when video is loaded, one should use document.getElementById('vid').addEventListener('loadeddata'‌​, function (){//do whatever you want}); more details on the event here.