HTML5 Video Tag 사용시 모바일 개발 관련 고찰!

* 현재 프로젝트 진행중

html5 Video TAg를 이용하여 동영상 재생시;;

안드로이드 ... : control 프로퍼티가 있음에도 그냥 재생 , 재생바 , 전체 모드만 있을뿐  current time, duration  제대로 보여주지 않는다.. 자바스크립을 이용하여 표기가능!! (우왕)

IOS 6 의 경우 시간까지 명확히 보여준다..

서로 다른 양식을 보여줌으로 control 부분을 없애고 나머지 부분을 자바스크립트로 표현하려는 중...

-_-;; 많은 차이점이 있다.

IOS 에선 플레이 이전시 load 하지 않으면 duration을 표기 못하고 안드로이드에서 이상하게 플레이를 하지 못한다. 

- 추가사항

프로퍼티의 preload = auto 로  하면 duration 알수 없으며 ISO 제대로 하는건지.. javascript에서 load 호출시 duration 이  정확히 나옴. 

<video id="video1" width="320" height="180"  preload="metadata" > 

<source src="/mobile/a.mp4" type="video/mp4">

</video>   

<script>

$('#video1').on('loadedmetadata', function() {

var dimensions = [this.videoWidth, this.videoHeight];

 alert(dimensions);

  });

</script>

다음소스를 일반PC에서 실행시 정보를 잘 뿌려준다.

Android -_-; 엉뚱한 값으로 준다

IOS[IPad 레티나] -_- 응답이 없다....... 

아 인터넷 뒤지는 도중 다음같은 문서를 보았다.

"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it." - Apple documentation.

IOS 에서 preload 와 auto-play 안되며 유저가 init 하기전까지 데이터 없네.. ;; 

2013-09-10 추가

모바일 orientationchange 에 대한 고찰.. 안드로이드 하위버전이 정확하게 먹지 않기 때문에 resize 이벤트로 해줘야 했다.