html video태그가 android 인앱에서 컨트롤 나오는 현상

이벤트 웹페이지를 이번에 만들게 되면서, 상단영역은 애니메이션이 많아 css로 구현하기 애매해서

video태그로 영상파일을 embed하는 식으로 진행을 했다.

<video autoplay muted playsinline class="d-none d-md-block">
    <source src="./assets/video/visual.mp4" type="video/mp4">
</video>
<video autoplay muted playsinline class="d-block d-md-none">
    <source src="./assets/video/visual.mobile.mp4" type="video/mp4">
</video>

 

작업시간을 줄이기위해 bootstrap기반으로 진행하였고, 

웹&모바일용 영상파일을 두어 반응형에 따라 스위칭되게 하였다.

웹으로 접속시 모바일버전 영상은 안보이는데 브라우저 사이즈를 줄여서 모바일 사이즈로 줄이니 그때서야 재생이 되더라.

display가 안된상태에서는 정지되고, display되는순간 재생되는건 이번에 알게되었다 ㅋ. (오히려좋음)

 

다만, 인앱(android)에서 로드시에 위 html 상태라면 컨트롤이 보이는 피드백이 있더라.

문제의 현상

video 태그면 어쩔수없나 해서 gif나 canvas sprite로 처리하려했으나, 마지막으로 video 태그의 poster속성을 시도해봤더니..

다행히 더이상 저 현상이 일어나지않더라.... 굿.

 

<video autoplay muted playsinline class="d-block d-md-none" poster="assets/images/main/video-poster.png">
    <source src="./assets/video/visual.mobile.mp4" type="video/mp4">
</video>