HTML5ではFlashでなくてもvideoタグを使えば動画の再生が出来ます。とはいえIE8以下が対応してなかったりでまだ使いづらい感があります。そこで比較的簡単に古いIEにも対応できる（Flashを表示してくれる）動画プレーヤー「video.js」の紹介です。
設置の仕方
この記事を書いている時点でのバージョンは3.4.0です。
ダウンロードをしてサンプルのファイルを見ればだいたい分かるぐらいシンプルです。Webフォントを使用しているので、
fontファイルも入っています。再生マークなどに使っているようです。
HTML
JacascriptやCSSを読み込む部分は以下の様にします。
<link href="video-js.css" rel="stylesheet" type="text/css"> <script src="video.js"></script> <script> videojs.options.flash.swf = "video-js.swf"; </script>
そして設置したい箇所に以下の記述をします。ソースはデモのままです。
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
<source src="https://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
主に変更する箇所は
- widthとheightは動画のサイズへ変更
- posterは動画再生前のサムネイル画像のパス指定
- sourceのsrcに動画のパスを指定
になるかと思います。
古いIEで表示が変な場合
古いIEでも表示するとなっていますが、プレーヤー部分を指定しているCSSが古いIE向けになっていなかったりするので、該当の部分をvideo-js.cssから探し修正しましょう。
ちなみに古いIEではvideoタグが使えないため、Flashでの動画表示になっています。
動画ファイル形式
動画ファイルの形式ですが、自分が試したところだいたいのブラウザ（IE6～・Firefox最新・Chrome最新）H.264のmp4で再生されました。なのでsourseにはmp4しか指定していません。もし動かない場合はそれぞれの形式の動画を増やしていけば良いと思います。デモファイルには以下のように記述されています。
<source src="https://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <source src="https://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> <source src="https://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
というわけでvideo.jsのご紹介でした。早くvideoタグで形式もひとつで簡単に設置できるようにならないかなと思ってます。
コメント