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

　連載第4回目では、HTML5によってウェブ標準のテクノロジーだけで実現可能となったマルチメディアを取り上げます。新たに導入された、ビデオやオーディオを再生するvideo要素やaudio要素、ウェブページに図を描くcanvas要素について説明します。

はじめに

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

過去の連載も読む

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

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

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

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

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

ビデオとオーディオ

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

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属性の他に、いくつかの属性が規定されています。

video要素の属性

属性	説明
src	ビデオ・ファイルのURLを指定します
preload	事前にどれくらいのデータをダウンロードしておくべきかの目安を指定します 指定可能な値は"none"、"metadata"、"auto" のいずれかです autoplay属性が指定されている場合、preload属性は無視されます
autoplay	ビデオが再生可能になったら即座に再生を開始することを指示する論理属性です
loop	ビデオの再生が終了したら最初に戻って再生を続けることを指示する論理属性です
controls	ビデオの再生や停止などのユーザーインタフェースを表示させることを指示する論理属性です
width	ビデオの横幅をCSSピクセルで指定します
height	ビデオの縦幅をCSSピクセルで指定します
poster	ビデオが再生可能になる前に表示させたい画像ファイルのURLを指定します

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