javascripthtmlgoogle-chromesafariwebkit

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

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

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