차이

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

--- html:html5:video [2012/07/23 17:53]
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
@@ 줄 16: / 줄 18: @@
     * 이 옵션은 _V_ 명령으로 동영상을 로딩할 경우 명시적으로 메소드 호출에 넣을 것.
     * 그래도 안되는 경우 Flash Fallback을 기본으로 해야 한다. 이렇게 하면 Flash가 될 경우 무조건 Flash를 사용하고 그 뒤에 HTML5를 검사해서 수행한다.
-      * <code javascript>_V_.options.techOrder = ['flash', 'html5', 'links'];</code>
+      * <code javascript>_V_.options.techOrder = ['flash', 'html5'];</code>
       * 위 코드는 <video> 태그가 로딩 되기 전에 실행 된 상태여야 한다. 따라서 페이지 맨위에서 해주는게 좋다. <video> 동적 로딩시에는 동적 로딩보다만 일찍해주면 된다.
-  * IE9에서 로딩 이미지만 돌고 플레이가 안되는 경우가 발생하였다.(어떤 경우에 발생하는지 확실치 않음).
+  * IE9에서 로딩 이미지만 돌고 플레이가 안되는 경우가 발생하였다.<del>(어떤 경우에 발생하는지 확실치 않음).</del>
     * poster 이미지를 지정해주면 해결 된다. [[http://help.videojs.com/discussions/problems/323-videojs-mp4-file-not-working-in-internet-explorer-9-on-one-server|40번째댓글참조]]
     * <del>_V_('video_id').src('동영상URL'); 이렇게 동영상 URL을 매번 재설정 했더니 잘 작동하였다.</del> 위에 방법이 더 나음.
+  * 동영상 포맷을 한개만 지정하면 해당 동영상을 재생하지 못하는 브라우저에서 일시적으로 <video>영역이 에러가 난 것처럼 나오는데, 이 때는 <source>를 지정하지 않은 상태에서 video.js API인 ''_V_('video_id').src('동영상URL')''을 사용하면 된다.
 ===== MIME Type =====
   * 각 동영상 파일을 해당 동영상에 맞는 MIME Type 으로 지정하지 않으면 Firefox, IE 9, Safari 에서는 동영상을 재생하지 않는다. 구글 크롬과 오페라는 <source> 태그를 우선시하여 재생한다.
@@ 줄 57: / 줄 60: @@
 ===== Video.js =====
   * [[http://help.videojs.com/discussions/problems/1278-video-appears-without-skin-when-added-dynamically|동일 ID로 기존 video 요소는 지워버리고 새로운 동영상을 플레이할 때 문제가 발생한다.]]
-    * 기존 동영상의 ID를 기억하고 있다가 재생성을 시도하면 재생성을 하지 않기 때문에 발생하는 현상이다.
+    * 기존 동영상의 ID를 기억하고 있다가 재생성을 시도하면 재생성을 하지 않고 기존 객체를 재사용하기 때문에 발생하는 현상이다.
     * <code>delete _V_.players['기존id'];</code>로 삭제한 뒤에 다시 생성한다.
+  * 동영상 종료 후 포스터이미지 다시 보여주기 [[http://help.videojs.com/discussions/questions/481-poster-image-at-video-end|poster image at video end]]<code javascript>
+_V_("VIDEO_TAG_ID").ready(function(){
+    this.addEvent("ended", function(){
+        this.posterImage.show();
+        this.posterImage.fadeIn();
+    });
+});`
+</code>
+  * 동영상 자동 재생 혹은 play() 메소드를 통한 명시적 재생시 컨트롤바가 사라지지 않는 현상이 발생한다.<code javascript>
+// 명시적으로 video.controlBar.fadeOut() 처리를 하면된다.
+setTimeout(function () {
+        _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>

권남

사용자 도구

사이트 도구

차이

문서 도구