CODEWITHSUNDEEP
iosreactjstypescriptautoplay
bachtick
bachtick

Reputation: 59

Video autoplay issues in iOS for React web app

I'm developing a little quiz web app that has different states:

COUNTDOWN, INTRO, QUIZ, END

COUNTDOWN has a 30s countdown until it moves you automatically to the next state (INTRO). INTRO has a 20s video of a character talking about the quiz and how to play. When players press the "start" button, they move to the next state, QUIZ. This stage has a default static image of the character and a short 4s feedback video of the character will play to say if the user's answer is right or wrong. After the timer runs out, users are automatically moved to END where another video (4s) of the character plays to say well done etc.

The weird thing is, on desktop and Android devices, the videos play fine (autoplay) but on iOS devices, it's so inconsistent? I've tested on Browserstack as well as multiple iPads/iPhones and some will play all the videos, some of the videos, or none at all (and they all have the same settings on). I can't use the muted attribute on the <video> tag because I have audio... Here is my <video>:

<video ref={videoRef} autoPlay playsInline>
    <source src={state} type="video/mp4" />
    Your browser does not support the video tag.
</video>

I know Apple has strict browser policies but I just don't understand why it's so inconsistent. It seems the feedback videos usually always play on iOS devices but not the intro or end videos. I'm assuming it's because there's user interaction involved in the feedback videos where users have to click "submit" (hence the videos can play) and the others are rendered on its own automatically due to the countdown?

Would it work if I had a button at the start of it all - would that count as enough of user interaction or no? Is the only option for me to have a play/unmute button?

Upvotes: 0

Views: 29

Answers (0)

Related Questions