HTML5(<video>) or Flashを自動で切り替えてくれるJavaScript Library（iPadやiPhoneでも動画を再生）
Web上で動画を再生させる方法はswfobjectを利用して、
Flash対応 → Flashを埋め込む
Flash未対応 → 静的画像
とするのが今までの正攻法。今後はiPad, iPhone(iOS)やSmart Phoneでも再生できるように、HTML5の"video" Tagを使うのが当たり前になってくると思う。
各Browserの差異を吸収して、HTML5のVideo TagとFlashを切り替えてくれるJavaScript Libraryを紹介。
| MediaElement.js | VideoJS | JW Player | |
| License | GPLv2/MIT | LGPLv3 | CC3.0 |
| 商用利用 | - | FlashはFlowPlayerを利用しているので、Logoを消したい場合はこちらを参照。 $95～ | $89～ 詳しくはOfficial Siteで |
| 説明 | Flash PlayerのSourceも公開されているので何でも出来る。基本はこれでいい気がする。 | FlowPlayerがJavaScriptで制御できて使いやすい。 | Creative Commons Licenseなので注意。iOSの場合だけHTML5を使うみたい。 |
| 注意点 | 「○秒間連続再生できるまで停止する」のようなBuffering機能がない。 | 3.2.7にはBufferingしている間Loading Animationが表示されないBugがある。（詳細） |
Video tagに設定できる属性は下記Siteを参考に。
- HTMLMediaElement Class Reference | Safari Developer Library
- Safari HTML5 Audio and Video Guide | Safari Developer Library
その他HTML5 Videoについて参考になる記事
- Videoタグのイベント挙動サンプル ｜ Classmethod.dev()
日本語で分かりやすい - code · Video for Everybody!
Video Tagの基本的な記述方法、動画形式など必読！ - HTML5 video issues on the iPad and how to solve them | Blog | Miller Medeiros
iPadでHTML5 Videoを使った場合のEventの取得方法。ちなみにiPadではPageを読み込んだ後に自動で動画を再生させることは出来ない。
実際使ってみて・・・
Video Tagを使うと動画形式によって再生できたり出来なかったりでハマるので、前に書いたMobile端末かを判断するScriptを使って、PCならFlash, MobileならHTML5と使い分けた方がいいと思う。
< 2011/12/21 Modified >
表に「注意点」追記。
< Related Posts >