HTML5 Videoで全画面（フルスクリーン）動画再生
リッチコンテンツという言葉が以前から存在するように、最近はテキストや画像だけでなく、動画や動画のストリーミング配信を用いたコンテンツが多いですね。
只、一概に言えませんが、動画コンテンツはファイルサイズやトラフィックの問題から、外部サービス（YoutubeやUSTREAM）を使うケースが大半かと思います。
そういった背景もあり、HTML5で追加されたVideo要素にはこれまで注目していませんでした。
（仕様が標準化段階であり、ブラウザ毎に異なる動画形式でファイルを用意する煩雑さも要因の一つ）
さて、冒頭からVideo要素のネガティブな面ばかり取り上げましたが、メリットも勿論存在します。
今回はそんなVideo要素を中心にご紹介します。
Video要素とは
既にご存知かと思いますので誤解を恐れず簡単に説明すると、
ブラウザ単体で（Flash PlayerやQuickTimeなどプラグインを必要とせず）動画再生出来るよう、HTML5で新しく追加された要素です。
Video要素のメリット
- Flash未対応のモバイルデバイスに対応
-
Flash Playerの非搭載のiPadやiPhoneでも再生可能。
※デメリットとして、現状ではブラウザ毎に異なる動画形式でファイル作成が必要。 - シンプルな記述で埋め込み可能
-
従来のFlash
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.example.com/dummy" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.example.com/dummy" allowscriptaccess="always" allowfullscreen="true"></embed> </object>
HTML5 Video
<video src="http://www.example.com/dummy" autoplay controls></video>
- デザインを損なわない
-
Video要素にcontrols属性を追加するだけで、再生／一時停止などのコントロールボタンを表示制御可能。
ボタンを全て非表示にすることは勿論、オリジナルデザインも作成可能であり、ブランドサイトでデザインを損なうことなく埋め込みが出来ます。
動画の全画面（フルスクリーン）再生デモ
事の発端は、Firefoxの標準動画プレイヤー（※）には全画面ボタンがあるが、その他のブラウザに無いことでした。
（Windows版：Firefox12、Chrome19、Opera11.64などで比較）
※ここでの標準動画プレイヤーとはvideo要素にcontrols属性を追加した際に表示されるデフォルトUIを意味します。
Firefoxの全画面機能は、挙動から察するにW3Cで策定中のFullscreen APIで実現されているようです。
Fullscreen APIはChromeでも実装済みとの事で以前から気になっていたので、この機会にVideo要素と組み合わせて全画面化を検証しました。
（今回は簡易的にVideo要素の下へボタンを配置したのみ）
※対応ブラウザ：Chrome、Firefox、Safari（全画面表示のみ）
（IE、SafariではH.264形式の動画ファイルを用意していないため動画再生不可）
※本動画はStudio Lab01様の素材を利用しており、著作権はStudio Lab01様に帰属します。
今後の予定
各ブラウザの対応状況から、少し先の時期になりそうですが
- Video要素のフォールバックを掘り下げて調査
未対応ブラウザ向けの処置（poster属性）や、IE/SafariとChrome/Firefoxなどで別の動画ファイルを読み込ませるなど。
- Fullscreen APIのカスタマイズ性を調査
-
フルスクリーン時のみCSSを適用可能な:fullscreen擬似クラス（※）などがあり、
ライトボックスのようなデザインも作れるようなので、どれだけカスタマイズ性があるのか検証したいと考えています。
※2012年5月23日時点ではベンダープレフィックスが必要
※又、W3Cの最新仕様と異なりfull-screenと間にハイフンが必要（:-webkit-full-screenなど）