문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판 이전 판 다음 판 | 이전 판 마지막 판 양쪽 다음 판 | ||
html:html5:video [2012/07/23 17:12] kwon37xi [문제점] |
html:html5:video [2012/08/17 18:47] kwon37xi [HTML5 Video] |
||
---|---|---|---|
줄 1: | 줄 1: | ||
====== HTML5 Video ====== | ====== HTML5 Video ====== | ||
* [[http:// | * [[http:// | ||
+ | * [[http:// | ||
* Android 2.0~2.2는 video를 지원은 하지만, 컨트롤을 생성하지 않는 문제가 있다. 이 경우 자바스크립트로 생성해야 한다. | * Android 2.0~2.2는 video를 지원은 하지만, 컨트롤을 생성하지 않는 문제가 있다. 이 경우 자바스크립트로 생성해야 한다. | ||
* [[http:// | * [[http:// | ||
줄 15: | 줄 16: | ||
* 이 경우 **preload=" | * 이 경우 **preload=" | ||
* 이 옵션은 _V_ 명령으로 동영상을 로딩할 경우 명시적으로 메소드 호출에 넣을 것. | * 이 옵션은 _V_ 명령으로 동영상을 로딩할 경우 명시적으로 메소드 호출에 넣을 것. | ||
- | * 그래도 안되는 경우 Flash Fallback을 기본으로 해야 한다.< | + | * 그래도 안되는 경우 Flash Fallback을 기본으로 해야 한다. |
- | * IE9에서 로딩 이미지만 돌고 플레이가 안되는 경우가 발생하였다.(어떤 경우에 발생하는지 확실치 않음). | + | * <code javascript> |
+ | * 위 코드는 < | ||
+ | * IE9에서 로딩 이미지만 돌고 플레이가 안되는 경우가 발생하였다.<del>(어떤 경우에 발생하는지 확실치 않음).</ | ||
* poster 이미지를 지정해주면 해결 된다. [[http:// | * poster 이미지를 지정해주면 해결 된다. [[http:// | ||
* < | * < | ||
+ | * 동영상 포맷을 한개만 지정하면 해당 동영상을 재생하지 못하는 브라우저에서 일시적으로 < | ||
===== MIME Type ===== | ===== MIME Type ===== | ||
* 각 동영상 파일을 해당 동영상에 맞는 MIME Type 으로 지정하지 않으면 Firefox, IE 9, Safari 에서는 동영상을 재생하지 않는다. 구글 크롬과 오페라는 < | * 각 동영상 파일을 해당 동영상에 맞는 MIME Type 으로 지정하지 않으면 Firefox, IE 9, Safari 에서는 동영상을 재생하지 않는다. 구글 크롬과 오페라는 < | ||
줄 55: | 줄 59: | ||
===== Video.js ===== | ===== Video.js ===== | ||
* [[http:// | * [[http:// | ||
- | * 기존 동영상의 ID를 기억하고 있다가 재생성을 시도하면 재생성을 하지 않기 때문에 발생하는 현상이다. | + | * 기존 동영상의 ID를 기억하고 있다가 재생성을 시도하면 재생성을 하지 않고 기존 객체를 재사용하기 때문에 발생하는 현상이다. |
* < | * < | ||
+ | * 동영상 종료 후 포스터이미지 다시 보여주기 [[http:// | ||
+ | _V_(" | ||
+ | this.addEvent(" | ||
+ | this.posterImage.show(); | ||
+ | this.posterImage.fadeIn(); | ||
+ | }); | ||
+ | });` | ||
+ | </ | ||
+ | * 동영상 자동 재생 혹은 play() 메소드를 통한 명시적 재생시 컨트롤바가 사라지지 않는 현상이 발생한다.< | ||
+ | // 명시적으로 video.controlBar.fadeOut() 처리를 하면된다. | ||
+ | setTimeout(function () { | ||
+ | _V_(" | ||
+ | }, 2000); | ||
+ | </ | ||
+ | * 3.2 버전 IE9에서 플레이버튼 깨지는 현상이 발생한다. CSS에서 IE전용 코드부분을 제거한다.< | ||
+ | filter: progid: | ||
+ | filter: progid: | ||
+ | </ | ||
+ | * FullScreen 레이어가 아래로 갈 때. IE9, Opera 등에서는 기본으로 FullScreen을 지원하지 않아서 z-index 를 통해 풀스크린을 지원하는데, | ||
+ | .video-js.vjs-fullscreen { | ||
+ | z-index: 40000; | ||
+ | } | ||
+ | </ |