はじめに
この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。
過去の連載も読む
マルチメディアが強化されたHTML5
HTML5で新たに導入された要素のうち、ビデオやオーディオを再生するvideo要素やaudio要素、そして、ウェブページに図を描くcanvas要素は、もっともウェブ制作者から関心を集める機能といえるでしょう。
すでにブラウザを使ったビデオ視聴は当たり前となりました。また、動的に図が描画される機能やアニメーションも、今となっては当たり前となっています。この当たり前と思える機能が、HTMLにはサポートされていなかったのです。すでに言及したとおり、HTMLはここ10年ほどほとんど進化しておらず、現代のニーズにまったく応えられていなかったのです。
こういったマルチメディア系の機能は、Adobe社が提供するFlashや、Microsoft社が提供するSilverlightといったプラグインが担ってきました。しかし、HTML5によって、ようやく、当たり前のように使われてきた機能がウェブ標準のテクノロジーだけで実現できるようになったのです。
ビデオとオーディオ
video要素の使い方はとても簡単です。
<video src="video.mp4" controls></video>
video要素のsrc属性にビデオ・ファイルのURLを指定します。
video要素をサポートしたブラウザであれば、上図のように、ビデオの下方にビデオを制御するためのユーザーインタフェースが表示されます。このインタフェースはブラウザによって異なりますが、基本的なビデオ操作の機能が組み込まれています。
video要素にcontrols属性を入れることで、このようなユーザーインタフェースが表示されます。もしマークアップのみでビデオを再生させたいのであれば、controls属性を必ず入れてください。もしこの属性がないと、ユーザーインタフェースが表示されず、利用者はビデオを再生することすらできません。
なお、audio要素の使い方は、video要素とほとんど同じです。ここでは、video要素を例に解説していきます。
video要素の属性
video要素には、controls属性の他に、いくつかの属性が規定されています。
| 属性 | 説明 |
src |
ビデオ・ファイルのURLを指定します |
preload |
事前にどれくらいのデータをダウンロードしておくべきかの目安を指定します 指定可能な値は"none"、"metadata"、"auto" のいずれかです autoplay属性が指定されている場合、preload属性は無視されます |
autoplay |
ビデオが再生可能になったら即座に再生を開始することを指示する論理属性です |
loop |
ビデオの再生が終了したら最初に戻って再生を続けることを指示する論理属性です |
controls |
ビデオの再生や停止などのユーザーインタフェースを表示させることを指示する論理属性です |
width |
ビデオの横幅をCSSピクセルで指定します |
height |
ビデオの縦幅をCSSピクセルで指定します |
poster |
ビデオが再生可能になる前に表示させたい画像ファイルのURLを指定します |
audio要素で利用できる属性はvideo要素とほとんど同じですが、ビデオの用途に特化したwidth属性、height属性、poster属性はaudio要素で利用することはできません。
