html:html5:video

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- html:html5:video [2012/08/06 19:08]
kwon37xi [문제점과 video.js를 통한 해결책]
+++ html:html5:video [2015/03/04 12:50] (현재)
kwon37xi
@@ 줄 1: / 줄 1: @@
 ====== HTML5 Video ======
   * [[http://html5video.org/|HTML5Video]] - [[http://html5video.org/wiki/HTML5_Player_Comparison|HTML5 Video Player Comparison]]
+  * [[http://www.808.dk/?code-html-5-video|Code HTML5 Video]] HTML5 Video 예제와 실제 동영상 플레이 보기 테스트에 좋음.
   * Android 2.0~2.2는 video를 지원은 하지만, 컨트롤을 생성하지 않는 문제가 있다. 이 경우 자바스크립트로 생성해야 한다.
+  * [[https://github.com/selz/plyr|Plyr]] HTML5 기반 Video/Audio Player
   * [[http://videojs.com/|VideoJS]] : 기본적으로 HTML5 비디오 태그를 사용했을 때 생기는 브라우저별 버그들을 VideoJS 자바스크립트가 잡아주는 형태이다. 브라우저 버그를 무시할 경우에는 굳이 사용하지 않아도 된다.
   * [[http://jplayer.org/|jPlayer]] jQuery HTML5 Video Player Plugin
@@ 줄 73: / 줄 75: @@
         _V_("VIDEO_TAG_ID").controlBar.fadeOut(); // 혹은 hide()도 가능.
     }, 2000);
+</code>
+  * 3.2 버전 IE9에서 플레이버튼 깨지는 현상이 발생한다. CSS에서 IE전용 코드부분을 제거한다.<code css>
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
+</code>
+  * FullScreen 레이어가 아래로 갈 때. IE9, Opera 등에서는 기본으로 FullScreen을 지원하지 않아서 z-index 를 통해 풀스크린을 지원하는데, 이때 video.js의 z-index보다 더 높은 값을 가진 요소가 페이지상에 있으면 안된다. 이경우 .vjs-fullscreen 요소에 대한 z-index를 적절한 값으로 지정해주면 된다.<code css>
+.video-js.vjs-fullscreen {
+    z-index: 40000;
+}
 </code>

html/html5/video.1344247702.txt.gz · 마지막으로 수정됨: 2012/08/06 19:08 저자 kwon37xi