HTML5 Video Player

19
HTML5 Video Player 2011-07-28 おおくぼ ひろあき Interactive Designer Flash & Flex Developer iOS Developer Web Developer

description

 

Transcript of HTML5 Video Player

Page 1: HTML5 Video Player

HTML5 Video Player 2011-07-28

おおくぼ ひろあき

Interactive DesignerFlash & Flex DeveloperiOS DeveloperWeb Developer

Page 2: HTML5 Video Player

HTML5でのビデオ再生

HTML5 Video Player 2011-07-28

Page 3: HTML5 Video Player

HTML5でのビデオ再生

HTML5 Video Player 2011-07-28

Flash(swf) + .flv からの移行は可能?

Page 4: HTML5 Video Player

HTML5でのビデオ再生

HTML5 Video Player 2011-07-28

Flash(swf) + .flv からの移行は可能?

ブラウザ互換がポイント

Page 5: HTML5 Video Player

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は対象ブラウザが少ないので外した

Page 6: HTML5 Video Player

各CODEC対応ブラウザ

HTML5 Video Player 2011-07-28

h.264

WebM

IE9+

IE9+

*Chromeは将来h.264をサポートしないらしいが現状は再生できる。*IE6~IE8は<video>タグをサポートしない。

Page 7: HTML5 Video Player

非対応ブラウザ 対策

HTML5 Video Player 2011-07-28

IE6~IE8 対策

Page 8: HTML5 Video Player

IE6~IE8 対策

HTML5 Video Player 2011-07-28

Flash(swf)で再生

プラグインで再生

Page 9: HTML5 Video Player

HTML5でのビデオ再生

HTML5 Video Player 2011-07-28

ブラウザを判別し<video>か<object>で再生

Javascript + Flash Video Player が必要

Page 10: HTML5 Video Player

HTML5 ビデオライブラリ

HTML5 Video Player 2011-07-28

VideoJShttp://videojs.com/

MediaElementhttp://mediaelementjs.com/

LeanBack Playerhttp://dev.mennerich.name/showroom/html5_video/

...etc

Page 11: HTML5 Video Player

HTML5 Video Player 2011-07-28

via : MedeaElement.jshttp://mediaelementjs.com/

Page 12: HTML5 Video Player

HTML5 Video Player 2011-07-28

<video>タグ オリジナル・コントローラー

Page 13: HTML5 Video Player

HTML5 ビデオライブラリ

HTML5 Video Player 2011-07-28

DEMO

Page 14: HTML5 Video Player

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

Page 15: HTML5 Video Player

HTML5 ビデオライブラリ

HTML5 Video Player 2011-07-28

問題Flash Video Player のライセンス

Page 16: HTML5 Video Player

HTML5 ビデオライブラリ

HTML5 Video Player 2011-07-28

答Flash Video Player は自作する

Page 17: HTML5 Video Player

HTML5 ビデオライブラリ

HTML5 Video Player 2011-07-28

答IE6~IE8はサポートしない

Page 19: HTML5 Video Player

HTML5 Video Player 2011-07-28

おおくぼ ひろあき

@taikiken