[iOS13] 아이폰 저전력 모드에서 video 재생버튼 이슈

비디오 영역에 재생버튼이 한가운데에 뙇! 보이는 이슈가 제보되었으나 재현이 되지 않아서 궁금해하고 있었다. 디자인 팀장님께서 아이폰 저전력 모드에서 그런 현상이 발생한다고 알려주셔서 처음으로 원인을 알게 되었다. 우측상단 배터리가 노란색으로 표시되고 있다면 저전력 모드였던 것이다!

 

아이폰 저전력 모드

 

제보 스크린샷을 다시 확인해보니 저전력 모드인 것이 맞았고, 나도 설정 > 배터리 > 저전력 모드를 활성화 시키고 다시 확인해 보니 재현이 되었다.

 

 

 

유사 증상에 대해 가장 많이 추천되고 있는 방법은 아래와 같다. (2014년 글!! https://stackoverflow.com/questions/8911247/hide-iphone-html5-video-play-button) 하지만 ios10 까지는 먹혔던 것 같은 트릭이 이제는 먹히지 않는 것 같다. 진짜 비디오 태그는 늘 말썽이다.

video::-webkit-media-controls {
    display:none !important;
}

 

위 방법이 적용이 되지 않길래 혹시 shadow dom  이름이 변경되었나 싶어서 확인봤으나 -webkit-media-controls-container 로 변경해서 테스트 해봐도 적용되지 않았다. 동일 증상에 대해 이야기 하고 있는 글 : https://stackoverflow.com/questions/53071085/how-to-hide-html5-video-controls-on-ios-12

 

video 태그 shadow dom 구조

 

참고

• https://d0gf00t.tistory.com/35
• https://okayoon.tistory.com/entry/video%ED%83%9C%EA%B7%B8-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%9D%B4%EC%8A%88-%EC%A0%95%EB%A6%AC-%EC%82%AC%ED%95%AD