HTML5で実現できるマルチメディア系機能
ここが違う！サンプルで見るHTML5（4）

はじめに

　この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。

過去の連載も読む

• 第1回：HTML5が注目を浴びる理由とは？
• 第2回：HTML4から変化したHTML5のマークアップ
• 第3回：HTML5で再定義された要素と属性

マルチメディアが強化されたHTML5

　HTML5で新たに導入された要素のうち、ビデオやオーディオを再生するvideo要素やaudio要素、そして、ウェブページに図を描くcanvas要素は、もっともウェブ制作者から関心を集める機能といえるでしょう。

　すでにブラウザを使ったビデオ視聴は当たり前となりました。また、動的に図が描画される機能やアニメーションも、今となっては当たり前となっています。この当たり前と思える機能が、HTMLにはサポートされていなかったのです。すでに言及したとおり、HTMLはここ10年ほどほとんど進化しておらず、現代のニーズにまったく応えられていなかったのです。

　こういったマルチメディア系の機能は、Adobe社が提供するFlashや、Microsoft社が提供するSilverlightといったプラグインが担ってきました。しかし、HTML5によって、ようやく、当たり前のように使われてきた機能がウェブ標準のテクノロジーだけで実現できるようになったのです。

ビデオとオーディオ

　video要素の使い方はとても簡単です。

<video src="video.mp4" controls></video>

video要素の表示例（Internet Explorer 9 Platform Preview 7）

• ビデオ素材

　video要素のsrc属性にビデオ・ファイルのURLを指定します。

　video要素をサポートしたブラウザであれば、上図のように、ビデオの下方にビデオを制御するためのユーザーインタフェースが表示されます。このインタフェースはブラウザによって異なりますが、基本的なビデオ操作の機能が組み込まれています。

　video要素にcontrols属性を入れることで、このようなユーザーインタフェースが表示されます。もしマークアップのみでビデオを再生させたいのであれば、controls属性を必ず入れてください。もしこの属性がないと、ユーザーインタフェースが表示されず、利用者はビデオを再生することすらできません。

　なお、audio要素の使い方は、video要素とほとんど同じです。ここでは、video要素を例に解説していきます。

video要素の属性

　video要素には、controls属性の他に、いくつかの属性が規定されています。

　audio要素で利用できる属性はvideo要素とほとんど同じですが、ビデオの用途に特化したwidth属性、height属性、poster属性はaudio要素で利用することはできません。