[원인]
- 순수 video 태그 영역으로 재생하는게 아닌 썸네일 이미지를 사용하여 videojs 라이브러리를 사용 재생시 풀스크린을 하려고 video 태그는 width: 0, height: 0 으로 하고 아래와 같이 썸네일 image를 서버에서 가져와 style 적용함
2. 썸네일 클릭시 숨겨진 해당 video 태그의 ref 로 useRef로 play() 시키고 fullscreeen 메서드 실행시켜 풀스크린시 핸드폰을 가로세로 회전시켰을때 아래와같이 본래 사이즈로 돌아오지 못하는 이슈가 발생
[원인 분석 및 해결 방안]
- 먼저 videojs 라는 라이브러리를 사용하고 있기때문에 videojs에서 사용하는 속성 또는 이슈가 있는지 체크해봄
- videojs의 속성, css를 직접 건드려보았지만 수정할수없었고 풀스크린시에는 top-layer로 별개의 화면으로 잡히기때문에 풀스크린화면에서 회전이나 영상 사이즈만 조절하는건 불가능했음
- 그래서 videojs라이브러리가 아닌 순수 video태그로 만들고 같은 이슈가 있는지 확인결과, video태그를 썸네일로 재생시킬려고 숨기면 같은 이슈가 있다는걸 발견하였음
- 그래서 순수 video태그로 width, height을 주고 inline으로 재생시키고 전체화면 아이콘을 눌러 재생했을때는 잘되는걸 알게됨
- 결과적으로 썸네일로 재생하기위해서 재생해야할 video태그의 width, height을 0으로 주면 풀스크린에서 회전후 돌아올때 계산을 못하는듯 함
- width, height을 각각 1px을 주니 다음과 같이 해결됨
