IE6,7,8でもHTML5で動画再生 【video.js編】

以前紹介したhtml5mediaも再生だけなら十分ですが、video.jsは動画再生周りのイベント処理が充実しています。

VIdeo JS

video.jsも他のライブラリと同様に、videoタグに対応していないブラウザでは付属のswf経由で動画ファイルを再生します。

設置も簡単。まずはお約束のjsとcssの読み込み

<link href="path/to/video-js.css" rel="stylesheet">
<script src="path/to/video.js"></script>
<script>
//swfファイルを別のディレクトリに置く場合
      _V_.options.flash.swf = "path/to/video-js.swf"
</script>


videoタグでムービーを設置(コントローラ付き自動再生、自動読み込みの場合)

<video  class="video-js vjs-default-skin"  width="640" height="320" poster="path/to/image.jpg" id="samplemovie" autoplay controls preload="auto" >
<source src="path/to/sample.mp4" type='video/mp4' />
<source src="path/to/sample.webm" type='video/webm'/>
<source src="path/to/sample.ogv"  type='video/ogg' />
</video>
オプションについてはこちら

H264 mp4に対応していないFirefoxなどではswf経由でmp4を再生するので、PCサイトではwebmやogv形式の動画ファイルは特に必要ないかと思われます。
大して手間ではないので、webmやogvを用意しておいたほうが無難ではありますが。


webmやogvのコンバーターはこちら。フリーで使いやすい(Mac版のみ)
http://www.mirovideoconverter.com

You might also like

1 Comment