DEV Community

loading...

How to fix autoplay html5 video on iOS?

mort3za profile image Morteza Ziyae ・1 min read

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

Unhandled Promise Rejection: AbortError: The operation was aborted.

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!

Discussion (0)

pic
Editor guide