안녕하세요.
안드로이드 핸드폰을 가로방향으로 회전 시 인앱브라우저에서 재생 중인 비디오가 전체 화면으로 바뀝니다. 비디오가 전체 화면으로 자동으로 바뀌지 않게 하고 싶습니다.
ios에서는 비디오 태그에 playsinline 옵션을 추가하면 전체 화면으로 변경되지 않지만,
안드로이드에서는 webkit-playsinline 옵션츨 추가해도 전체화면으로 변경됩니다.
<video playsinline webkit-playsinline></video>
또한, 아래 코드를 추가하여 비디오가 전체화면으로 바뀌자마자 exitFullScreen() 호출 하여, 화면 회전 시 사용자 눈에는 비디오가 전체화면으로 바뀌고 다시 복구 되는 게 보이지 않도록 했습니다.
하지만, 카카오톡 팝업으로 ‘전체화면을 종료하려면 상단에서 드래그하여 뒤로 버튼을 터치하세요.’ 라는 메세지가 출력됩니다.
document.addEventListener('fullscreenchange', (event) => {
if (document.fullscreenElement) {
document.exitFullscreen();
}
});
궁금한 점은, 안드로이드 핸드폰을 가로로 회전했을 때 비디오가 전체화면으로 가지 않도록 하는 방법이 따로 있는지,
만약 없다면 fullscreenchange 이벤트가 발생할 때 카카오톡 팝업이 출력 되지 않도록 하는 방법이 있는지 문의 드립니다.
감사합니다.