はじめに
もう何年も前のこと、プログラマになりたての私が主に携わっていたのは、プレゼンテーションやコンピュータゲームを構築するためのマルチメディアアプリケーション（ビデオ、オーディオ、アニメーション、テキストを組み合わせたプログラム）の開発でした。1990年代初頭には、作業のほとんどをMacromedia Directorで行っていました。ビデオはもちろん、オーディオを扱うWebアプリケーションの開発でさえ夢物語と思われていた頃でしたが、RealNetworksの登場で状況は一変しました。RealNetworksは初めてのメジャーなストリーミングテクノロジであり、バッファにためたメディアコンテンツをインターネット経由で送信するという処理を可能にしました。のちにRealNetworksはWebページへのメディアコンテンツの埋め込みにも対応しました。
HTML内にビデオやオーディオに関する専用のタグを含めることは、HTML 3では技術的に不可能であり、HTML 4でも非現実的でした。基本的にHTML 4.0は「機能的にフリーズ」されたバージョンなので、コンテンツ表示の仕組みがフォーマット（Apple QuickTimeムービーやFlashビデオなど）にかなり依存しており、サーバに情報を渡すためには、さまざまなパラメータを持つタグを使わなければならないのが普通でした。そのため、Webページへのビデオやオーディオの埋め込みは、混沌とした黒魔術のようなものになっていました。
こうした状況を考えると、<audio>タグと<video>タグがHTML 5仕様に早々に追加されたのも不思議ではありません。各ブラウザベンダーも、HTML 5仕様のうち、まずこれらの要素を実装しようとしたようです。どちらの要素も、該当するメディアをブラウザが簡単に処理できるようにするためのものです。付随するサポートAPIは、ユーザーによるきめ細かな制御を可能にします。
HTML 5の<audio>および<video>要素
まずはシンプルな方から見ていきましょう。表1に、<audio>タグの属性を示します。
| 属性名 | 値の形式 | 説明 |
| src | xs:anyURI | メディアソースのURLを指定する |
| autobuffer | autobuffer | このバイナリ属性を指定すると、ユーザーエージェント（ブラウザ）が自動的にコンテンツをバッファリングする。それ以外の場合は、ユーザーが関連APIを介してコンテンツのバッファリングを行う |
| autoplay | autoplay | このバイナリ属性を指定した場合、ユーザーエージェント（ブラウザ）はページの読み込みが終わると自動的にオーディオの再生を開始する |
| loop | loop | このバイナリ属性を指定した場合、ユーザーエージェント（ブラウザ）はメディアの終端に達すると最初に戻ってコンテンツの再生を繰り返す |
| controls | controls | このバイナリ属性を指定すると、ユーザーエージェント（ブラウザ）は処理中のリソースに関してユーザーが対話的操作を行えるコントロールを表示する |
なお、<audio>（および<video>）要素は、インターフェースがたとえ非表示であっても、<div>ベースのすべての要素でサポートされている一般的な属性（id、style、classなど）もサポートします。
<video>要素には、<audio>要素のすべての属性に加え、さらに3つの属性が含まれています（表2を参照）。
| 属性名 | 値の形式 | 説明 |
| src | xs:anyURI | メディアソースのURLを指定する |
| autobuffer | autobuffer | このバイナリ属性を指定すると、ユーザーエージェント（ブラウザ）が自動的にコンテンツをバッファリングする。それ以外の場合は、ユーザーが関連APIを介してコンテンツのバッファリングを行う |
| autoplay | autoplay | このバイナリ属性を指定した場合、ユーザーエージェント（ブラウザ）はページの読み込みが終わると自動的にビデオの再生を開始する |
| loop | loop | このバイナリ属性を指定した場合、ユーザーエージェント（ブラウザ）はメディアの終端に達すると最初に戻ってコンテンツの再生を繰り返す |
| controls | controls | このバイナリ属性を指定すると、ユーザーエージェント（ブラウザ）は処理中のリソースに関してユーザーが対話的操作を行えるコントロールを表示する |
| width | dimension ###(cm|em|en|in|px|pt|%) | この属性には、ビデオ画像の幅を適切な単位で指定する。heightが未指定の場合、その値はwidthが与えられた最初のビデオの高さに応じて決定される |
| height | dimension ###(cm|em|en|in|px|pt|%) | この属性には、ビデオ画像の高さを適切な単位で指定する。widthが未指定の場合、その値はwidthが与えられた最初のビデオの幅に応じて決定される |
| poster | xs:anyURI | 画像へのリンクを指定する。この画像は、ビデオのレンダリングができない場合、またはバッファリングがまだ済んでいない場合に使用される。このポスター画像は、ビデオの表示位置に指定の縦横比で表示される |
posterは、事実上、ビデオのバッファリング中に使用されるプレースホルダ画像であり、常に必要なものではありません。ビデオコーデックのなかには、ダウンロード前にビデオから特定のフレーム（最初のフレームか、ビデオの途中からランダムに選択されたフレーム）をポスター用に自動抽出し、そのフレームを先に読み込むものがあります。ただし、すべてのコーデックがこの機能を備えているわけではありません。
このような特別な場合にポスターを使用すると、読み込み中のビデオについて代替の「ブランドマーク」を作成できます。ビデオの再生が実際に始まってしまえば、たとえ一時停止の操作が行われても、ポスター画像は無効になります。一時停止の場合であればその直前のフレームが表示され、ビデオ再生の終了後であれば最後のフレームが表示されます。
通常、ビデオやオーディオの形式では、そのメディアソースの圧縮およびフォーマットに用いられたコーデックが使用されますが、ブラウザエージェントがそのコーデックをサポートしていないこともあります。こうした場合に備えてHTML 5では、@src属性の代わりとして、予備の<source>要素も定義します。この要素には、与えられたリソースの場所と、そのリソースが公開しているコーデックの種類を指定します。表3に<source>要素の定義を示します。
| 属性名 | 値の形式 | 説明 |
| src | xs:anyURI | メディアソースのURLを指定する |
| type | リソースのMIMEタイプを示す文字列 | この属性には、表示されるメディアリソースのMIMEタイプを（通常は"video/フォーマット"の形式で）指定する |
| media | メディアのコーデックを示す文字列 | この文字列には、指定のリソースに適用可能なコーデックの情報が含まれる |
