문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판 이전 판 다음 판 | 이전 판 다음 판 양쪽 다음 판 | ||
html:html5:video [2012/07/18 17:58] kwon37xi [문제점] |
html:html5:video [2012/08/08 18:49] kwon37xi |
||
---|---|---|---|
줄 10: | 줄 10: | ||
* [[http:// | * [[http:// | ||
- | ===== 문제점 ===== | + | ===== 문제점과 video.js를 통한 해결책 |
* Google Chrome(19까지 테스트)은 < | * Google Chrome(19까지 테스트)은 < | ||
* 확인된 바로는 작동하지 않는 것이 아니라, 동적으로 생성된 video 태그는, 플레이 버튼을 누르고 난 뒤 실제 플레이가 되기까지의 시간이 계속해서 증가해서 마치 작동 안하는 것처럼 보이게 되는 것 같다. | * 확인된 바로는 작동하지 않는 것이 아니라, 동적으로 생성된 video 태그는, 플레이 버튼을 누르고 난 뒤 실제 플레이가 되기까지의 시간이 계속해서 증가해서 마치 작동 안하는 것처럼 보이게 되는 것 같다. | ||
* 이 경우 **preload=" | * 이 경우 **preload=" | ||
- | | + | * 이 옵션은 _V_ 명령으로 동영상을 로딩할 경우 명시적으로 메소드 호출에 넣을 것. |
- | * _V_(' | + | * 그래도 안되는 경우 Flash Fallback을 기본으로 해야 한다. 이렇게 하면 Flash가 될 경우 무조건 Flash를 사용하고 그 뒤에 HTML5를 검사해서 수행한다. |
+ | * <code javascript> | ||
+ | * 위 코드는 < | ||
+ | | ||
+ | * poster 이미지를 지정해주면 해결 된다. [[http:// | ||
+ | * <del>_V_(' | ||
+ | * 동영상 포맷을 한개만 지정하면 해당 동영상을 재생하지 못하는 브라우저에서 일시적으로 < | ||
===== MIME Type ===== | ===== MIME Type ===== | ||
* 각 동영상 파일을 해당 동영상에 맞는 MIME Type 으로 지정하지 않으면 Firefox, IE 9, Safari 에서는 동영상을 재생하지 않는다. 구글 크롬과 오페라는 < | * 각 동영상 파일을 해당 동영상에 맞는 MIME Type 으로 지정하지 않으면 Firefox, IE 9, Safari 에서는 동영상을 재생하지 않는다. 구글 크롬과 오페라는 < | ||
줄 52: | 줄 58: | ||
===== 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; | ||
+ | } | ||
+ | </ |