html5 video player
DESCRIPTION
TRANSCRIPT
![Page 1: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/1.jpg)
HTML5 Video Player 2011-07-28
おおくぼ ひろあき
Interactive DesignerFlash & Flex DeveloperiOS DeveloperWeb Developer
![Page 2: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/2.jpg)
HTML5でのビデオ再生
HTML5 Video Player 2011-07-28
![Page 3: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/3.jpg)
HTML5でのビデオ再生
HTML5 Video Player 2011-07-28
Flash(swf) + .flv からの移行は可能?
![Page 4: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/4.jpg)
HTML5でのビデオ再生
HTML5 Video Player 2011-07-28
Flash(swf) + .flv からの移行は可能?
ブラウザ互換がポイント
![Page 5: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/6.jpg)
各CODEC対応ブラウザ
HTML5 Video Player 2011-07-28
h.264
WebM
IE9+
IE9+
*Chromeは将来h.264をサポートしないらしいが現状は再生できる。*IE6~IE8は<video>タグをサポートしない。
![Page 7: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/7.jpg)
非対応ブラウザ 対策
HTML5 Video Player 2011-07-28
IE6~IE8 対策
![Page 8: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/8.jpg)
IE6~IE8 対策
HTML5 Video Player 2011-07-28
Flash(swf)で再生
プラグインで再生
![Page 9: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/9.jpg)
HTML5でのビデオ再生
HTML5 Video Player 2011-07-28
ブラウザを判別し<video>か<object>で再生
Javascript + Flash Video Player が必要
![Page 10: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/11.jpg)
HTML5 Video Player 2011-07-28
via : MedeaElement.jshttp://mediaelementjs.com/
![Page 12: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/12.jpg)
HTML5 Video Player 2011-07-28
<video>タグ オリジナル・コントローラー
![Page 13: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/13.jpg)
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
DEMO
![Page 14: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/15.jpg)
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
問題Flash Video Player のライセンス
![Page 16: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/16.jpg)
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
答Flash Video Player は自作する
![Page 17: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/17.jpg)
HTML5 ビデオライブラリ
HTML5 Video Player 2011-07-28
答IE6~IE8はサポートしない
![Page 18: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/18.jpg)
参考サイト
HTML5 Video Player 2011-07-28
Video for Everybody!http://camendesign.com/code/video_for_everybody
![Page 19: HTML5 Video Player](https://reader034.vdocuments.mx/reader034/viewer/2022050804/54b740a84a795987518b4826/html5/thumbnails/19.jpg)
HTML5 Video Player 2011-07-28
おおくぼ ひろあき
@taikiken