권남

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 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
  * [[http://www.freemake.com/free_video_converter/|Freemake HTML5 Video Converter]]
  * [[http://www.thecssninja.com/javascript/fullscreen|Fullscreen HTML5 Video]]
  * [[http://www.script-tutorials.com/html5-video-player-jquery-plugin/|HTML5 jQuery Plugin 예제]]
  * [[http://www.sitepoint.com/what-do-you-need-to-know-about-html5-video/|What do you need to know about HTML5 video]]
  * [[http://www.webmproject.org/|WebM Project]]

===== 문제점과 video.js를 통한 해결책 =====
  * Google Chrome(19까지 테스트)은 <video> 태그를 동적으로 생성해서 추가할 경우 대부분의 경우 동영상을 재생하지 못하는 현상이 발생하고 있다. 어쩌다 재생하기도 한다. 동적이지 않은 상태에서는 문제가 없었다.
    * 확인된 바로는 작동하지 않는 것이 아니라, 동적으로 생성된 video 태그는, 플레이 버튼을 누르고 난 뒤 실제 플레이가 되기까지의 시간이 계속해서 증가해서 마치 작동 안하는 것처럼 보이게 되는 것 같다.
    * 이 경우 **preload="none"** 속성을 주면 훨씬 나아졌다. 그러나 완벽하진 않았다.
    * 이 옵션은 _V_ 명령으로 동영상을 로딩할 경우 명시적으로 메소드 호출에 넣을 것.
    * 그래도 안되는 경우 Flash Fallback을 기본으로 해야 한다. 이렇게 하면 Flash가 될 경우 무조건 Flash를 사용하고 그 뒤에 HTML5를 검사해서 수행한다.
      * <code javascript>_V_.options.techOrder = ['flash', 'html5'];</code>
      * 위 코드는 <video> 태그가 로딩 되기 전에 실행 된 상태여야 한다. 따라서 페이지 맨위에서 해주는게 좋다. <video> 동적 로딩시에는 동적 로딩보다만 일찍해주면 된다.
  * 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> 태그를 우선시하여 재생한다.
  * video/webm webm
  * video/ogg ogv
  * video/mp4 mp4
  * [[http://css.dzone.com/articles/how-configure-your-webserver|How To Configure Your Webserver for HTML5 Video | Web Builder Zone]]
  * Apache 설정<code>
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
</code>
===== 모두를 위한 Video =====
  * [[http://videojs.com/|VideoJS]]에 나온 예제. Flash Fallback은 HTML5가 지원되지 않는 경우에 작동한다.
  * 아래에서는 오픈소스 비디오 플레이어인 [[http://flowplayer.org/|FlowPlayer]]를 Flash Fallback으로 사용했다. 원하는대로 사용해도 된다. FlowPlayer는 FLV, MP4를 지원한다.

<code html>
    <video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
</code>


===== Video.js =====
  * [[http://help.videojs.com/discussions/problems/1278-video-appears-without-skin-when-added-dynamically|동일 ID로 기존 video 요소는 지워버리고 새로운 동영상을 플레이할 때 문제가 발생한다.]]
    * 기존 동영상의 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>
권남

사용자 도구

사이트 도구

문서 도구
