[bugfix]ios 저전력모드(Low Power Mode) video 재생 문제

저전력 모드일 때 배터리 잔량이 노란색으로 표시 됨

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
});

const myVideo = document.getElementById("myVideo");
 
myVideo
  .play()
  .then(() => {
    console.log("저전력 모드 아님");
  })
  .catch((error) => {
    console.log(error, "저전력모드");
    // do something
  });



var promise = document.querySelector('video').play();
  
if (promise !== undefined) {
  promise.then(_ => {
    // 자동 재생 시작!
  }).catch(error => {
     // 자동 재생이 막힘.
     promise.style.display = 'none';
  });
}


const video = document.querySelector("video");
 if (video.paused) {
      video.style.display = 'none';
}

운영 배포 시 코드
video의 poster 속성을 가져와서 img 태그를 만들어서 넣어줌

function handleIOSLowPowerMode(videoTag) {
    videoTag.play()
        .then(() => {
            // 비디오 재생 성공
        })
        .catch((error) => {
            // 비디오 재생 실패 (저전력 모드)
            const posterSrc = videoTag.getAttribute('poster');
            const imgElem = document.createElement('img');
            imgElem.src = posterSrc;
            imgElem.alt = 'alt을 넣어줍니다.';
            imgElem.style.width = '100%';
 
            // 비디오 요소를 이미지 요소로 대체
            videoTag.parentNode.replaceChild(imgElem, videoTag);
        });
}
 
// 사용
const videoElem = document.querySelector('.video');
handleIOSLowPowerMode(videoElem);

https://logfetch.com/html-autoplay/