• HTML5Video - HTML5 Video Player Comparison
• Android 2.0~2.2는 video를 지원은 하지만, 컨트롤을 생성하지 않는 문제가 있다. 이 경우 자바스크립트로 생성해야 한다.
• VideoJS : 기본적으로 HTML5 비디오 태그를 사용했을 때 생기는 브라우저별 버그들을 VideoJS 자바스크립트가 잡아주는 형태이다. 브라우저 버그를 무시할 경우에는 굳이 사용하지 않아도 된다.
• jPlayer jQuery HTML5 Video Player Plugin
• Freemake HTML5 Video Converter
• Fullscreen HTML5 Video
• HTML5 jQuery Plugin 예제
• What do you need to know about HTML5 video
• WebM Project

• Google Chrome(19까지 테스트)은 <video> 태그를 동적으로 생성해서 추가할 경우 대부분의 경우 동영상을 재생하지 못하는 현상이 발생하고 있다. 어쩌다 재생하기도 한다. 동적이지 않은 상태에서는 문제가 없었다.
  • 이 경우 preload=“none” 속성을 주면 훨씬 나아졌다. 그러나 완벽하진 않았다.

• 각 동영상 파일을 해당 동영상에 맞는 MIME Type 으로 지정하지 않으면 Firefox, IE 9, Safari 에서는 동영상을 재생하지 않는다. 구글 크롬과 오페라는 <source> 태그를 우선시하여 재생한다.
• video/webm webm
• video/ogg ogv
• video/mp4 mp4
• How To Configure Your Webserver for HTML5 Video | Web Builder Zone
• Apache 설정

  AddType video/ogg .ogv
  AddType video/mp4 .mp4
  AddType video/webm .webm

• VideoJS에 나온 예제. Flash Fallback은 HTML5가 지원되지 않는 경우에 작동한다.
• 아래에서는 오픈소스 비디오 플레이어인 FlowPlayer를 Flash Fallback으로 사용했다. 원하는대로 사용해도 된다. FlowPlayer는 FLV, MP4를 지원한다.

    <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>

• 동일 ID로 기존 video 요소는 지워버리고 새로운 동영상을 플레이할 때 문제가 발생한다.
  • 기존 동영상의 ID를 기억하고 있다가 재생성을 시도하면 재생성을 하지 않기 때문에 발생하는 현상이다.

  • delete _V_.players['기존id'];

    로 삭제한 뒤에 다시 생성한다.