How to fix autoplay html5 video on iOS?

If you have used Javascript to play an html5 video, you may encounter some errors, including this error:

or permission errors.

The reason is that browsers in recent years changed their policies to prevent autoplay video because they think users don't want it (that's correct in most cases).

What we can do to solve this issue?

• Add autoplay, muted and playsinline attributes to your <video> element.
• If you need sound, you should put an unmute button beside the video, then in onClick callback, get video element and set muted = false by Javascript.

Pro Tip! If you have multiple videos on your page and only a single unmute button, then make sure to unmute all videos in the click callback of that button, otherwise, iOS won't let you unmute video before playing it on demand.

That's it, happy autoplaying!

Comments

[michelle tan]

What if I don't want the video to autoplay?

[Morteza Z]

In that case just don't add autoplay attribute to the video tag. Adding autoplay="false" or autoplay="true" are equal and will autoplay the video.