2011年12月8日木曜日

HTML5(<video>) or Flashを自動で切り替えてくれるJavaScript Library(iPadやiPhoneでも動画を再生)

all_browser_movieWeb上で動画を再生させる方法は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を参考に。

その他HTML5 Videoについて参考になる記事

 

実際使ってみて・・・

Video Tagを使うと動画形式によって再生できたり出来なかったりでハマるので、前に書いたMobile端末かを判断するScriptを使って、PCならFlash, MobileならHTML5と使い分けた方がいいと思う。

 


< 2011/12/21 Modified >
表に「注意点」追記。


 

< Related Posts >

コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives