How to Autoplay HTML Video on iOS (Supports Low-Power Mode)

On desktop, it’s fairly easy to enforce autoplay on HTML5 videos.

<video autoplay>
  <source src="/path/to/video.mp4" type="video/mp4">
</video>

But in order to support iOS, we need to add an additional playsinline attribute.

<video autoplay playsinline>
  <source src="/path/to/video.mp4" type="video/mp4">
</video>

If we’re developing in React, we’ll need to write it in camelCase: playsInline.

Quick Caveat

One thing to note is that this solution will only work if Low Power Mode is turned off on the iOS device.

iOS uses a suspend event when in low-power mode. We can detect this using an event listener on the video element. This means we can provide a fallback UI in order to handle these cases.

First, let’s add an id to our video element.

<video id="myVideo" autoplay playsinline>
  <source src="/path/to/video.mp4" type="video/mp4">
</video>

Then, add event listeners.

const video = document.getElementById('myVideo');
video.addEventListener('suspend', () => {
  // We're in low-power mode, show fallback UI
});
video.addEventListener('play', () => {
  // Remove fallback UI if user plays video manually
});