Portfolio v2 - 5. Video autoplay bugfix

생각보다 비디오 관련 문제가 컸기에 따로 글로 정리한다.

 

# 비디오 자동재생 조건

이번에 겪은 상황 별 비디오가 자동재생 되는 조건은 다음과 같다.

 

1 <video>에 필요한 prop

  데스크탑 / 안드로이드 크롬: muted

  iOS 모바일 사파리 & 크롬: autoplay, muted, playsInline

2. iOS 크롬 추가 사항

  js에서 video.play()를 실행할 것

3. 모바일 공통 추가 사항

  저전력 모드가 아닐 것

 

따라서 저전력 모드를 제외한 모든 경우를 커버할 수 있는 코드는 다음과 같다.

 

 

# 저전력 모드 처리

모바일 저전력 모드에서는 동영상을 재생할 수 있는 방법이 없어보인다.

따라서 저전력 모드일 때를 대비한 fallback을 보여줘야만 한다.

하지만 아쉽게도 브라우저에서 저전력 모드인지를 직접 확인할 수 있는 길은 없다.

따라서 동영상을 재생해보고 재생이 안되면 저전력 모드이겠거니 하고 유추하는 수 밖엔 없다.

 

나는 저전력 모드 체크용 컴포넌트를 만들어 예외처리를 하였다.

재생 가능한지 체크하기 위한 더미 비디오 태그를 추가하고선 video.play()를 해보고 에러가 발생하면 캐치해서 저전력 모드임을 알리는 방식이다.

 

홈 화면에서는 비디오 대신 폴백 이미지를 보여주면서 저전력 모드 해제 후 새로고침 하기를 요청하는 메세지를 띄워주었다.

 

추가로 혹시나 주기적으로 저전력 모드를 체크하여 저전력 모드가 해제되면 새로고침 없이 자동으로 비디오를 재생시킬 수 있는지 확인해보았다.

하지만 페이지가 로드 된 후 저전력 모드를 해제하더라도 한 번 재생 불가 처리된 영상을 재생할 수는 없는 것으로 확인되었다.

브라우저 내부에서 비디오 로드 시 저전력 모드를 확인하고 그 이후에는 별다른 처리 없이 그대로 그 상태를 유지하는 것으로 추측된다.