Autoplaying Videos With Sound in HTML

Autoplaying videos with sound has become more difficult, but is it really needed?

1136 views

By. Jacob

Edited: 2019-09-20 14:25

Videos included in HTML via the video element will play automatically when using the autoplay attribute, but in some browsers, the sound will be muted in order to avoid annoying users.

However, autoplaying a video is a perfectly legitimate design goal, provided that we take care not to interrupt or annoy the user. For example, autoplaying video-ads with sound is never okay on a web page, because they are extremely intrusive, and they are one of the main reasons why users install ad-blockers.

To autoplay a video that is muted, we may simply do like this:

<video id="video" autoplay muted>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Using a play button

Instead of autoplaying the video, you could also have a "play" button to start the video. Using JavaScript, a video can be started using .play():

let play_button = document.querySelector('#play_button');
play_button.addEventListener("click", play_video);

function play_video() {
  document.querySelector('#video').play();
}

And the HTML:

<button id="play_button">Play<button>

Why autoplaying is bad

Some users even think autoplaying videos are more annoying than popups, since it can be very disruptive and stressful when sound suddenly starts playing unexpectedly.

In Google Chrome, autoplaying is currently not allowed. You can still autoplay videos that are muted, but it is not possible to autoplay videos with sound.

Autoplay with sound is however not completely disabled in chrome, thanks to the Media Engagement Index.

Circumventing autoplay policies in Chrome

Some websites, such as CNN and YouTube, might still autoplay videos with sound in Chrome, often to great annoyance of their users.

The reason they are still able to autoplay is is due to the Media Engagement Index and/or white-listing. As a user browses the internet, the whitelist will grow. Videos will only be allowed to autoplay if a user has a high Media Engagement with a website.

You can check your Media Engagement by typing this in your browser's address bar:

chrome://media-engagement

To clear the media engagement for sites, you can delete your Browsing History. It is not necessary to delete your cookies.

After clearing the data, you can try going to a site you know used to autoplay videos to test if Videos will still autoplay. It will probably not work for YouTube, as it seems they are white-listed.

The MEI approach might not be perfect, but it is better than just flat out rejecting all autoplay functionality, since it is hard to imagine a YouTube or Netflix without autoplay.

Check if video was allowed to play

You can check if a video was allowed to autoplay in a browser using a "promise". If a video was allowed to autoplay, the promise should not be "undefined".

See the below example:

let promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay was allowed, video started playing!
  }).catch(error => {
    // Autoplay was not allowed.
    // Instead, show a "Play" button so the user can manually start the video
  });
}

One of the cool things about HTML5 video is, we can easily design our own video controls to play, stop and pause the video.