HTML5 Video

• HTML5Video - HTML5 Video Player Comparison
• Code HTML5 Video HTML5 Video 예제와 실제 동영상 플레이 보기 테스트에 좋음.
• Android 2.0~2.2는 video를 지원은 하지만, 컨트롤을 생성하지 않는 문제가 있다. 이 경우 자바스크립트로 생성해야 한다.
• Plyr HTML5 기반 Video/Audio Player
• 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> 태그를 동적으로 생성해서 추가할 경우 대부분의 경우 동영상을 재생하지 못하는 현상이 발생하고 있다. 어쩌다 재생하기도 한다. 동적이지 않은 상태에서는 문제가 없었다.
  • 확인된 바로는 작동하지 않는 것이 아니라, 동적으로 생성된 video 태그는, 플레이 버튼을 누르고 난 뒤 실제 플레이가 되기까지의 시간이 계속해서 증가해서 마치 작동 안하는 것처럼 보이게 되는 것 같다.
  • 이 경우 preload=“none” 속성을 주면 훨씬 나아졌다. 그러나 완벽하진 않았다.
  • 이 옵션은 _V_ 명령으로 동영상을 로딩할 경우 명시적으로 메소드 호출에 넣을 것.
  • 그래도 안되는 경우 Flash Fallback을 기본으로 해야 한다. 이렇게 하면 Flash가 될 경우 무조건 Flash를 사용하고 그 뒤에 HTML5를 검사해서 수행한다.

    • _V_.options.techOrder = ['flash', 'html5'];

    • 위 코드는 <video> 태그가 로딩 되기 전에 실행 된 상태여야 한다. 따라서 페이지 맨위에서 해주는게 좋다. <video> 동적 로딩시에는 동적 로딩보다만 일찍해주면 된다.
• IE9에서 로딩 이미지만 돌고 플레이가 안되는 경우가 발생하였다.(어떤 경우에 발생하는지 확실치 않음).
  • poster 이미지를 지정해주면 해결 된다. 40번째댓글참조
  • _V_('video_id').src('동영상URL'); 이렇게 동영상 URL을 매번 재설정 했더니 잘 작동하였다. 위에 방법이 더 나음.
• 동영상 포맷을 한개만 지정하면 해당 동영상을 재생하지 못하는 브라우저에서 일시적으로 <video>영역이 에러가 난 것처럼 나오는데, 이 때는 <source>를 지정하지 않은 상태에서 video.js API인 _V_('video_id').src('동영상URL')을 사용하면 된다.

• 각 동영상 파일을 해당 동영상에 맞는 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'];

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

• 동영상 종료 후 포스터이미지 다시 보여주기 poster image at video end

  _V_("VIDEO_TAG_ID").ready(function(){
      this.addEvent("ended", function(){
          this.posterImage.show();
          this.posterImage.fadeIn();
      });
  });`

• 동영상 자동 재생 혹은 play() 메소드를 통한 명시적 재생시 컨트롤바가 사라지지 않는 현상이 발생한다.

  // 명시적으로 video.controlBar.fadeOut() 처리를 하면된다.
  setTimeout(function () {
          _V_("VIDEO_TAG_ID").controlBar.fadeOut(); // 혹은 hide()도 가능.
      }, 2000);

• 3.2 버전 IE9에서 플레이버튼 깨지는 현상이 발생한다. CSS에서 IE전용 코드부분을 제거한다.

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );

• FullScreen 레이어가 아래로 갈 때. IE9, Opera 등에서는 기본으로 FullScreen을 지원하지 않아서 z-index 를 통해 풀스크린을 지원하는데, 이때 video.js의 z-index보다 더 높은 값을 가진 요소가 페이지상에 있으면 안된다. 이경우 .vjs-fullscreen 요소에 대한 z-index를 적절한 값으로 지정해주면 된다.

  .video-js.vjs-fullscreen {
      z-index: 40000;
  }