IOS video autoplay 작동 안하는 이슈 해결

video/audio autoplay

[JS] audio 태그로 bgm 재생, play() failed because the user didn't interact with the document first 에러
이전에 자동재생 이슈로 썼었던 글

기존에 비디오/오디오를 자동재생 시킬 때마다 이슈가 있었기 때문에 muted attribute를 추가한 뒤 자동재생을 시도했는데, android나 PC 환경에서는 이상이 없었지만 ios 기기에서 자동재생이 되지 않고 계속 재생바로 직접 재생해야 하는 문제가 나타났다.

 	<div>
        <video
          src={videoSrc}
          autoPlay
          loop
          muted
          playsInline
        />
    </div>

구글링을 통해 playsInline 속성도 추가해 주었는데 계속해서 자동재생이 되질 않아 확인해보니,
IOS 저전력 모드일 경우 자동재생이 되지 않는다.

밥먹듯이 저전력 모드를 켜놓고 사는 사람으로서, 바로 끄고 확인해봤더니 자동재생이 잘 되었다.

추가로, playsInline 속성을 추가해주지 않으면 보고있는 화면에서 동영상이 재생되는게 아닌 비디오 플레이어가 재생된다.

결론

• playsInline
• muted
• 저전력 모드 확인