[javaScript] ios기기에서 절전모드(저절력모드) 일 때, video 자동재생되지 않는 이슈

 

ios 기기에서 저전력(절전) 모드 일 때,
video autoplay(자동재생)되지 않는 현상 해결 방법 3가지!

 

[이슈 설명]

<video> 태그를 활용해 영상을 자동재생으로 추가했을 때, 유독 아이폰에서만 자동재생이 되지 않는 현상을 발견했다.

그 이유는 아이폰에서 절전모드인 저전력 모드를 사용하고 있는 경우에만 나타나는 현상이다!

 

[해결방법 1]

사용자가 영상을 클릭 또는 영상 컨트롤할 수 있는 버튼을 통해 play/pause 제어를 할 수 있도록 변경하는 방법이다.

(단점, 기획자를 비롯해 함께 프로젝트를 진행하는 TF 인원들에게 기능 수정을 요청해야 한다..)

 

[해결방법 2]

영상이 재생되지 않을 때의 조건으로 스크립트 제어로 강제로 재생 코드를 추가하는 방법이다.

$('body').on('click touchstart', function () {
	const videoElement = document.getElementById('home_video');
    if (videoElement.playing) {
        // video is already playing so do nothing
    }
    else {
        // video is not playing
        // so play video now
        videoElement.play();
    }
});

 

[해결방법 3]

이벤트 리스너를 통해 저전력(절전) 모드를 감지하여 별도의 코드를 추가하는 방법이다.

미디어 데이터 로딩이 일시 중단되었을 때를 감지하기 위한 suspend 이벤트를 사용한다.

const video = document.getElementById('myVideo');
video.addEventListener('suspend', () => {
  // We're in low-power mode, show fallback UI
});
video.addEventListener('play', () => {
  // Remove fallback UI if user plays video manually
});

 

 

 

 

웹 화면에 영상을 자동재생으로 추가하는 경우가 많이 있는데..

넣을 때마다 계속 새로운 이슈가 발생하는 듯하다ㅠ

자동재생으로 이슈 생기는 분들 화이팅하세요!!

 

 

[참고자료]

- ios 절전모드 이슈 해결 2 : https://shaktisinghcheema.com/how-to-autoplay-video-on-mobile-devices-on-low-power-mode/

How to autoplay video in a website when mobile device is on low power mode - Shakti Singh Cheema

- ios 절전모드 이슈 해결 3 : https://simplernerd.com/html-autoplay/

How to Autoplay HTML Video on iOS (Supports Low-Power Mode) - Simplernerd