Automatically Playing HTML5 Videos on Mobile

Since the arrival of HTML5, adding a video to a website or web application has become as easy as pie, you just need to add a <video> tag along with one or more <source> tags.

Note that it remains necessary to provide several video file formats for optimal compatibility

To launch a video automatically when the page loads (or when a new block appears), there is an attribute logically called "autoplay", which just needs to be added to the <video> element.

However, when the site is accessed from a mobile device, there is a strong chance that the content won't launch automatically. I'll explain why and how to solve this problem.

Autoplay on mobile

There are two main reasons why video autoplay is limited on mobile devices:

• To limit data consumption on users' data plans without them realizing it
• Improving user experience and preventing sounds from triggering all over the place while browsing (already annoying on PC, but even more so in a public place)

This is why on iOS and Android, automatic video playback is limited to a very specific case, and requires additional attributes to work.

The muted attribute

An autoplay video must absolutely have the sound turned off using the muted attribute in order to play automatically once loaded.

Even though bandwidth isn't affected (the video is loaded with sound, it's just muted), this helps reduce noise pollution, and theoretically limits the use of autoplay to illustration or background videos, which are often fairly short and played on loop, and therefore lightweight.

Note that if the video doesn't originally contain sound (no audio track), then the muted attribute can be omitted

The playsinline attribute

This attribute is mainly required on iOS, because by default the system opens videos in a proprietary video player, which is incompatible with autoplay.

You therefore need to explicitly tell the system that this video should be played inside the browser, within the page in which it is embedded.

Demonstration

Here is a minimal code example for embedding an autoplay video that works on mobile!

In the example below, the loop attribute is optional, but often used for illustration videos.

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

If you're viewing this article on your smartphone, you'll see that the video launches automatically, whether you're on Android or iOS.

Launching the video with a delay

How do you make the video launch automatically but after a certain delay, using the .play() method of the video API in Javascript on mobile?

The limitations for launching the video programmatically are the same as previously mentioned, which means that if your video is muted, you'll be able to call the .play() method at any time.

On the other hand, if you want the video to launch with sound, the call to this function must absolutely happen after a user interaction (a click). In the case of an HTML5 game in which several videos are launched, you'll therefore need to adapt the user journey so that they make a click right before launching a video with sound.