DEV Community

Morteza Z
Morteza Z

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!

Top comments (2)

Collapse
 
mmchel12 profile image
michelle tan

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

Collapse
 
mort3za profile image
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.