DEV Community

Morteza Ziyae
Morteza Ziyae

Posted on

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:

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 (2)

Collapse
mmchel12 profile image
michelle tan

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

Collapse
mort3za profile image
Morteza Ziyae Author

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.