How to autoplay a video using HTML 5 in Chrome

HTML5, Uncategorized, Web Design

Chrome is a great browser but sometimes it has a lot of security features that end up conflicting with your code and what you’re trying to do.  For example, they added a feature that won’t play a video on a website if the sound is enabled.  It will block it because it doesn’t want the user hearing an unwanted video.  Using the HTML5 video tag, if I were to add a video to a page that has the controls visible, autoplays, and loops the code would look like this:

<video controls autoplay loop>
<source src=”movie.mp4″ type=”video/mp4″>
</video>

The issue with this is Chrome would not play the video because it hasn’t been muted.  The sound would start to play and Chrome doesn’t want that.  So the solution is pretty simple, you have to mute the video and then, only then, will Chrome play it normally when the page loads.  To mute the video add a “muted” attribute like so:

<video controls autoplay loop muted>
<source src=”movie.mp4″ type=”video/mp4″>
</video>

Now Chrome’s security feature will be fulfilled and the video should play as normal and if the user wants to hear the video, they’ll have to unmute it.  If you’d like to learn more, be sure to check out our HTML/CSS/JavaScript Training.  Have a great day!