HTML5のvideoタグが可能にするリッチな表現と実装上の課題

こんにちは、jAction赤澤です。今回より、佐藤さんから引き継ぎ赤澤が本コラムを担当します。引き続きご愛読いただければ幸いです。

今回は、HTML5のvideoタグについてご紹介します。videoタグはHTML5で新設されるタグで、文字通り要素が動画(ビデオ)であることを示すタグです。

注目される動画マーケティング

ようやく動画を快適に見ることができる環境が整ってきたため、これをマーケティングに活かそうという気運が高まっています。各ブランドのソーシャルメディア利用状況をランキング化する「ブランドチャート」では、FacebookやTwitterをはじめ、新進のLINEなど数多くのソーシャルメディアの利用を企業ごとに集計しています。8月10日現在、このランキングの上位100社のうち、実に98社がYoutubeのアカウントを運用していました。企業のマーケティングにとって動画は欠かせないものになっていると考えられます。

今回説明するvideoタグは動画利用において2つの重要な役割を果たします。

• 新しい動画表現
• スマートフォンへの対応

まず、動画表現についてご説明します。

videoタグでできるようになった動画表現

新しく用意されたvideoタグを使えば下記のような目新しい表現が簡単に実現できます。

HTML5 VIDEO PUZZLEでは、1枚の動画を再生されたままばらばらに分割し、パズルにするという表現を実現しています。こういった表現は、従来は実現が難しかったものです。理由は動画がプラグインとして再生されていたということにあります。

videoタグ登場の背景＝「プラグイン」の壁

プラグインというのは、大まかに言うとブラウザの中で別のプログラムを動かすようなものです。昔から、RealPlayer・FLASH・SilverLightをはじめとしていろいろなプラグインが登場してきましたが、ブラウザの中で別のプログラムを動かすという仕組みは変わっていません。

この仕組みは、HTMLが文書を表現していた時代にはあまり大きな問題ではありませんでした。ブラウザはある空間をプラグインのために空けておき、プラグインはその空間の中で好きなように表現をするというやり方です。

しかし、Webアプリケーションというものが登場したり、一般的なWebページにも高度な画面効果が求められるようになると、プラグインはだんだん都合が悪くなってきました。

それは、プラグインが別プログラムであるということが原因です。

現在のWebアプリケーションは、JavaScriptで全体が制御されています。しかし、基本的にプラグインの中にはJavaScriptの影響を及ぼすことができません。こうなると、開発者たちはプラグインを使わないでWebアプリケーションを作成する方向に傾いてきます。また、スマートフォンやタブレットにはプラグイン自体が入れられないので、これらに対応しようと思うとプラグインの機能には頼れません。

このような不都合を解消するために必然的に生まれたのが「videoタグ」です。プラグインではなくブラウザの機能として動画再生を実装してしまえば、Javascriptで自由に制御できます。プラグインという外の力を借りるのではなく、自力で再生してしまおうということです。

冒頭にお見せした例のように動画自体に加工を加えるというのは、これまでHTML4とその周辺技術で実現するのは非常に困難でした。このデモでは動画を再生し、リアルタイムにそれぞれ切り出してcanvas要素に映し出すということを行っています。

プラグインでは、動画のある部分の情報にアクセスするというのは困難でした。なぜなら、プラグインの中のコンテンツはJavascriptでのアクセスの範囲外だったからです。

videoタグの「ブラウザ対応」というやっかいな課題と解決策

ここまで、videoタグがWebの進化とともに求められた機能であることを説明してきました。では、videoタグをこれからどんどん使うべきなのでしょうか。

残念ながら現実はそのようにはなっていません。

videoタグのサポート状況がブラウザによって様々である上に、用意すべき動画のフォーマットも統一されていません。実は、videoタグはHTML5の仕様策定においてなかなか合意できていない箇所のひとつです。

現状でvideoタグを使うなら、複数の動画フォーマットを用意する必要があります。また、videoタグに非対応のブラウザ向けにFLASHでの再生もサポートしなければ、見ることができないブラウザが出てきてしまいます。

このように発展途上の状態ではあるものの、冒頭にあげた2つ目のvideoタグの役割であるスマートフォンへの対応という点では、現状ほぼ問題なく使用できます。スマートフォンでは現行の機種であればほぼすべて対応しています。また、これから出てくるブラウザではより対応は進んでいくでしょう。将来的にvideoタグを使うのが主流になるのは確実です。

これから開発で動画を扱う際は、プラグイン形式との併用にするとしても、videoタグでの実装を含めていきノウハウを蓄積させていってはいかがでしょうか。動画を使ったマーケティングが求められている中、videoタグを中心とした動画関連の技術に習熟することは大きな強みになるでしょう。

次回は今回のデモを例に具体的なvideoタグのコードの書き方をお伝えしようと思います。

jAction　赤澤仁士
HTML5によるWebアプリ開発を効率化するJavaScriptライブラリ「jAction」にアドバイザーとして参加。新規事業開発が得意。現在所属する株式会社アイ・アム&インターワークスでは「SKILLPULL」を立ち上げ。過去に「Static HTML」を販売元と共同開発した。持論は「アイデアだけでは価値がない」