iOS Safari autoplay video

Photo by Bagus Hernawan on Unsplash

Before you read the rest of the article, I recommend you to try this sandbox on your iOS devices Safari browser you are struggling with. If it works, please do come back! Ive got a tale to tell .

https://ney5u.csb.app/

Welcome Back!
If youre reading this, the video does autoplay on your iOS Safari browser!

What a relief! Finally a working solution after spending hours on countless StackOverflow and Github threads. I assure you, you were very close.

Without further ado, lets jump to the solution.

Sounds easy! Modern browsers allow you to autoplay video if it :
- is muted
- has no audio track

Only if things were simple!

By now most of the browsers will be able to autoplay the video.

But Safari needs special care

Issue 1: React does not guarantee that muted attribute will be set in the actual DOM and Safari doesnt like that.

Missing `muted` attribute

This React issue is still open as of 20th June 2020.

To circumvent this, lets use dangerouslySetInnerHtml to ensure muted attribute is written to the DOM.

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Issue 2: For iOS 10+ versions, video can only autoplay in fullscreen mode. Read full policy

To be able to play inline, webkit requires you to pass playsinline attribute to allow a muted video to autoplay without requiring fullscreen.

Lets add that attribute in -

`playsinline` attribute for Safari

Issue 3: Still not able to autoplay videos in some versions of iOS? Lets try some fallback options

Till now weve followed all guidelines as per webkit policy. Lets try full-proofing our solution -:

1. use ffmpeg to extract audio out of the video (if you dont care about the audio at all)
   ffmpeg -i ./test.mp4 -c copy -an ./test_noaudio.mp4
2. Force autoplay using javascript. We will call video.play() by using a ref. Remember! we need these measures only for Safari browsers so well also create a small utility for that.

From MDN: But note that some browsers are lying: Chrome for example reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string, Chromium often reports itself as Chrome too or Seamonkey sometimes reports itself as Firefox.

Now lets use this utility in Reacts useEffect and useRefhooks to force play the video on mount.

3. The video.play()promise needs to be handled if it gets rejected.
Lets try a not-so-popular, bleeding edge fallback option
for Safari.
You can read more about it Evolution of