HTML5 VIDEO 플레이 관련 이슈

iOS Safari에서 HTML5 VIDEO 플레이와 관련된 이슈 2가지를 정리해 본다.

첫번째, iPhone에서 영상이 전체화면으로 플레이 되는 현상

iPad, iPod, Mac Safari에서는 Video 태그에서 지정한 width, height 값에 따라 영상 사이즈가 플레이 되지만

iPhone에서는 전체화면으로만 플레이가 되는 현상이 있다.

작은 화면에서 영상은 전체화면으로 플레이되야 한다는 애플측의 강제성이 있지 않나 생각이 든다.

하지만 iOS Safari가 아닌 iOS APP의 Webview를 통해 Video 가 플레이된다면 우회할 수 있는 방법이 있다.

① Web HTML Video 태그에 webkit-playsinline 프로퍼티를 추가

② iOS APP Source의 webView 프로퍼티를 변경

webView.allowsInlineMediaPlayback = YES;

allowsInlineMediaPlayback 프로퍼티는 HTML5 Video를 inline 상태에서 플레이할지 native full-screen controller를

사용하여 플레이할지 설정할수 있는 boolean 속성이다.

두번째, Autoplay가 작동되지 않는 현상

모바일 기기에서 사용자의 의도와 상관없이 영상이 플레이 되는 것을 막고자 애플에서는 

자바스크립트에 의해 autoplay 가 되지 않도록 막았다고 한다.

즉 아래와 같은 소스가 먹히지 않는다.

var vid = document.getElementById("myVideo");
vid.autoplay = true;
vid.load();

오직 사용자에 의한 터치나 클릭 이벤트를 통해 play() 메서드가 작동된다고 하니 참고하자.