Video is not auto playing on IOS by using react-player npm

Question

I want to play video when user comes to the page, it is working fine for all the platform except IOS. I am using react-player npm. I have tried by passing muted property but doesn't work.

My code looks like this

<ReactPlayer playing=true url="video_url" muted loop=true />

Thanks in advance !

score 12 · Accepted Answer · edited Aug 28 '22 at 18:32

12

I think you need the playsInline attribute for iOS autoplaying in non-fullscreen, as per https://webkit.org/blog/6784/new-video-policies-for-ios/:

On iPhone, elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins. elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.

react-player supports it as a prop.

edited Aug 28 '22 at 18:32

lee-m

2,269
17
29

answered Dec 04 '19 at 16:14

Vedran

336
3
7

Worked !! Thanks a lot #Vedran !! – Shivam Kubde Dec 05 '19 at 12:43

score 2 · Answer 2 · answered Jan 20 '22 at 11:50

2

Note that I is uppercase playsInline

// Example #1
<video playsInline />


// Example #2
<Player playsInline attr={someValue}>

answered Jan 20 '22 at 11:50

GMKHussain

3,342
1
21
19

score 2 · Answer 3 · answered Mar 15 '23 at 18:45

2

In the docs playsinline seems to be lowercase now.

answered Mar 15 '23 at 18:45

Anton Kouliavtsev

89
7

Video is not auto playing on IOS by using react-player npm

3 Answers3

Linked