autoplay video not playing on iOS (Safari) in production-CodePudding

i want to add a loop video on my react-app. I did it like this

 <video
   ref={videoRef}
   playsInline
   autoPlay
   muted
   loop>
  <source src={Video} type='video/mp4' />
</video>

it's working fine on Chrome/Firefox on mobile and on desktop.
But it's not playing on iPhone (Safari).
It is playing locally but when i deploy it. it's not playing :(

CodePudding user response：

I created a sandbox and deployed but was unable to reproduce your issue on iOS 15.2 (iPhone 12), it autoplays and loops as expected. Could please add more details?

CodePudding user response：

I had a similar kind of requirement with my previous project, the following code is working fine, from this we will have a muted video running in loop with autoplay.

 <video width="300px" height="500px" autoplay="autoplay" muted loop>
       <source src="https://user-images.githubusercontent.com/27606753/144578902-9b14dc56-9056-4650-942f-4d25f0ecbcc1.mp4" type="video/mp4" />
 </video>

CodePudding user response：

This is so because, according to the apple documentation, a video only plays automatically if:

it contains the playsinline attribute, and
it has no audio track present OR it contains the muted attribute.

So I'd suggest you include the playsinline attribute. Learn more on inline playback here.