이슈노트📝 ios 정책으로 인한 비디오 전체화면 해제

 

 

 

🚨 문제상황

동영상 강의를 재생하는 화면을 제작하였다.

PC화면과 모바일 화면 모두에서 디자인 시안에 맞추어 만들었다.

하지만 아이폰으로 강의를 재생하면 자동으로 전체화면이 되어

디자인 시안과는 전혀 다른 모습으로 나오는 것이었다!

 

윈도우로 퍼블리싱 작업을 하다보니 미처 발견하지 못했다.

 

 

 

💡문제 원인

문제 원인을 찾는 것은 아주 간단했다.

ios 운영체제에서는 <Video>태그가 자동으로 전체화면이 되는 정책이 있어 다르게 보인다.

 

따라서 아이폰으로 크롬을 통해 영상을 재생하면 정책으로 전체화면이 된다.

하지만 ios운영체제를 가진 PC로 똑같이 크롬을 통해 해당 사이트를 방문하면

윈도우와 똑같은 화면으로 나온다.🤔

 

추측하건데 크롬에서는 어떤 운영체제에서도 동일하게 나오도록 통일성을 맞춘게 아닐까 싶다..

 

 

다시 본론으로 들어와서 모바일 화면에서 어떻게 보이는지 확인하고싶다면

크롬이 아닌 사파리로 접속을 하면 된다!

+) 찾아보니 아이폰 또는 아이패드로 접속할 경우에 자동 전체화면이 설정되었다.

 

 

 

✅ 해결방법

원인을 알아냈으니 해결방법도 찾아보자.

먼저 video 태그 속성 중 하나인 playline 속성을 사용하는것이다.

 

이때 값은 true 또는 false로 주면 된다.

 

속성에 대한 자세한 내용은 아래 링크를 확인해보자.

멀티미디어: 비디오 - Web 개발 학습하기 | MDN

 

 

 

하지만 설정 값을 넣어줘도 디자인 시안처럼 나오질 않았다.

css를 다시 살펴보니 또 다른 특이점이 하나 있었다.

 

바로 윈도우상에서 css와 ios상에서 적용되는 순서가 다른 것이었다.

구글링 등으로 어떤 조건으로 우선순위가 부여되는지 확인할 수 없었지만

윈도우에서도 동일하게 나오도록 css를 수정하였다.

 

 

 

결론으로 video태그를 사용할 경우,

모바일 사파리에서도 동일하게 적용될 수 있도록 playline속성을 부여할 것!

두번째로는 모든 작업이 끝나고 기종마다 os환경마다 화면이 다르게 나올 수 있으니 확인 해볼 것!