웹뷰 비디오 적용 후기

발생일: 2015.07.27

키워드: 웹뷰 비디오, web view video

문제:

얼마 전에 웹뷰로 비디오를 재생하는 작업을 진행했다.

iOS 와 안드로이드 동일하게 올라가는 뷰였는데, 작업하면서 꽤 많은 버그가 발생했다.

다음 작업을 위해 메모해둔다.

해결책:

- <video> 태그는 동기로 넣자.

     비동기로 넣을 경우, 디바이스에 따라 전체 재생이 되지 않는 경우가 있다.

     iframe으로 선언해 바로 추가하는 방법으로 해결했다.

- 풀스크린 전환 시엔 webkitEnterFullScreen() 을 호출한다.

- 풀스크린 종료 후, 줌이 틀어지는 이슈 (안드로이드 4.1)

     meta 태그의 비율을 1.01 로 바꿨다가 다시 1.0 으로 설정하는 방식으로 해결했다. (setTimeout을 적용해줘야 된다)

- iOS에서 비디오에 0.5px 짜리 하얀 줄이 생기던 이슈

     비디오를 래핑하고 있는 엘리먼트를 translateX()로 이동했었는데, 렌더링 이슈가 발생한 것이었다.

     translate3d() 로 변경해 해결했다.

- 안드로이드에서 자동 재생 안됨 (사용자 이벤트 있어야 함)

- 안드로이드에선 풀스크린을 하드웨어 뷰에서 재생하는데, 2.x대에선 배경이 투명이 안된다. (2.x 대의 한계)

 

- 특정 버전 (아마도 4.1)에서 비디오 종료 후에 풀스크린이 닫히지 않는 이슈

     자바스크립트 인터페이스를 열어두고, 비디오 종료 시 웹에서 자바스크립트를 호출하도록 처리했다.