Videoで全画面(フルスクリーン)動画再生リッチコンテンツという言葉が以前から存在するように、最近はテキストや画像だけでなく、動画や動画のストリーミング配信を用いたコンテンツが多いですね。一概に言えませんが、動画コンテンツはファイルサイズやトラフィックの問題から、外部サービス(YoutubeやUSTREAM)を使うケースが大半かと思います。いった背景もあり、HTML5で追加されたVideo要素にはこれまで注目していませんでした。(仕様が標準化段階であり、ブラウザ毎に異なる動画形式でファイルを用意する煩雑さも要因の一つ)さて、冒頭からVideo要素のネガティブな面ばかり取り上げましたが、メリットも勿論存在します。今回はそんなVideo要素を中心にご紹介します。PlayerやQuickTimeなどプラグインを必要とせず)動画再生出来るよう、HTML5で新しく追加された要素です。Playerの非搭載のiPadやiPhoneでも再生可能。※デメリットとして、現状ではブラウザ毎に異なる動画形式でファイル作成が必要。controls></video>デザインを損なわないVideo要素にcontrols属性を追加するだけで、再生/一時停止などのコントロールボタンを表示制御可能。ボタンを全て非表示にすることは勿論、オリジナルデザインも作成可能であり、ブランドサイトでデザインを損なうことなく埋め込みが出来ます。動画の全画面(フルスクリーン)再生デモ事の発端は、Firefoxの標準動画プレイヤー(※)には全画面ボタンがあるが、その他のブラウザに無いことでした。(Windows版:Firefox12、Chrome19、Opera11.64などで比較)※ここでの標準動画プレイヤーとはvideo要素にcontrols属性を追加した際に表示されるデフォルトUIを意味します。APIで実現されているようです。APIはChromeでも実装済みとの事で以前から気になっていたので、この機会にVideo要素と組み合わせて全画面化を検証しました。Lab01様に帰属します。未対応ブラウザ向けの処置(poster属性)や、IE/SafariとChrome/Firefoxなどで別の動画ファイルを読み込ませるなど。APIのカスタマイズ性を調査フルスクリーン時のみCSSを適用可能な:fullscreen擬似クラス(※)などがあり、ライトボックスのようなデザインも作れるようなので、どれだけカスタマイズ性があるのか検証したいと考えています。※又、W3Cの最新仕様と異なりfull-screenと間にハイフンが必要(:-webkit-full-screenなど)HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください※(株)インフォマークのお問合せフォームへ移動します。重富ビル2FTEL.082-504-8311。