Upload
hiroaki-okubo
View
1.056
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
HTML5 Video Player 2011-07-28
おおくぼ ひろあき
Interactive DesignerFlash & Flex DeveloperiOS DeveloperWeb Developer
HTML5でのビデオ再生
HTML5 Video Player 2011-07-28
HTML5でのビデオ再生
HTML5 Video Player 2011-07-28
Flash(swf) + .flv からの移行は可能?
HTML5でのビデオ再生
HTML5 Video Player 2011-07-28
Flash(swf) + .flv からの移行は可能?
ブラウザ互換がポイント
HTML5<video>対応CODEC
HTML5 Video Player 2011-07-28
h.264Wikipedia : http://ja.wikipedia.org/wiki/H.264
WebMhttp://www.webmproject.org/
*Mozilla(Firefox)がサポートするOggは対象ブラウザが少ないので外した
各CODEC対応ブラウザ
HTML5 Video Player 2011-07-28
h.264
WebM
IE9+
IE9+
*Chromeは将来h.264をサポートしないらしいが現状は再生できる。*IE6~IE8は<video>タグをサポートしない。
非対応ブラウザ 対策
HTML5 Video Player 2011-07-28
IE6~IE8 対策
IE6~IE8 対策
HTML5 Video Player 2011-07-28
Flash(swf)で再生
プラグインで再生
HTML5でのビデオ再生
HTML5 Video Player 2011-07-28
ブラウザを判別し<video>か<object>で再生
Javascript + Flash Video Player が必要
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
VideoJShttp://videojs.com/
MediaElementhttp://mediaelementjs.com/
LeanBack Playerhttp://dev.mennerich.name/showroom/html5_video/
...etc
HTML5 Video Player 2011-07-28
via : MedeaElement.jshttp://mediaelementjs.com/
HTML5 Video Player 2011-07-28
<video>タグ オリジナル・コントローラー
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
DEMO
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
VideoJS : flowplayerhttp://flowplayer.org/
MediaElement : original
LeanBack : jwplayerhttp://www.longtailvideo.com/players/jw-flv-player/
Flash Video Player
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
問題Flash Video Player のライセンス
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
答Flash Video Player は自作する
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
答IE6~IE8はサポートしない
参考サイト
HTML5 Video Player 2011-07-28
Video for Everybody!http://camendesign.com/code/video_for_everybody
HTML5 Video Player 2011-07-28
おおくぼ ひろあき
@taikiken