Amazon s3 video is not played on Iphone

Question

I am having a react website where on the home page I have used the Video tag to play the video. On android browser the video is getting played but on Iphone browser the video is not getting played and s3 call from browser is not shown in the network call fro iphone i have checked using browserstack iphone emulator. Below is my code.

<video
    ref={videoRef}
    playsInline={true}
    controls={false}
    className={style.videoPlayer}
    loop={true}
    muted={true}
    onLoadedData={() => {
        const promise = videoRef.current.play();
        if (promise !== undefined) {
           promise
             .then(() => {
                videoRef.current.play();
              })
              .catch((err) => {
                videoRef.current.muted();
              });
          }
        }}
      >
       <source
         src="https://ibeng.s3.ap-south-1.amazonaws.com/ibEngHeroVideo+(1).mp4"
         type="video/mp4"
         />
          Your browser does not support the video tag.
      </video>

please help me with this issue.

Answer 1

I think you should replace onLoadData to onClick as IOS devices / IOS browsers need interaction to play a video. They dont let video to autoplay.

IOS has strict autoplay policies, please have a look at their webkit page.

Properly handle this promise

 const video = videoRef.current;
    if (video.paused) {
      video.play().catch((err) => {
        console.error("Autoplay error:", err);
      });
    } else {
      video.pause();
    }