Video autoplay doesn't work in Safari and Chrome desktop browsers

Question

I spent a lot of time trying to figure out why the video was embedded like this:

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

Autoplay starts after page loads in FireFox, but does not autoplay in Webkit-based browsers. This only happens on some random pages. So far I can't find the reason. I suspect the CMS editor created some unclosed tags or a lot of JS.

Answer 1

After using jQuery play() or DOM manipulation as suggested by other answers, it still doesn't work properly in Chrome for Android (version 56.0) (video doesn't autoplay).

Based on this post from developers.google. com, Starting with Chrome 53, the browser will respect the autoplay option if the video is muted.

Therefore, using the autoplay muted attribute in the video tag will make the video autoplay in Chrome browser version 53 and above.

Excerpted from the above link:

Answer 2

The best solution I could get is to add this code after

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

...Not pretty, but somehow effective.

renew Recently, many browsers can only automatically play videos with sound turned off, so you also need to add the muted attribute

to the video tag.

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