HTML5 の埋め込みコンテンツ関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 のフォーム関連タグ

●参考
4.8 Embedded content - HTML5

埋め込みコンテンツ関連要素一覧

要素	カテゴリ	タグ内に含むもの	説明
embed	flow content phrasing content embedded content interactive content	なし	外部アプリケーションやインタラクティブなコンテンツを置くためのもの。 一般的に使われてきたものが HTML5 で正式採用された。
video	flow content phrasing content embedded content interactive content (controls 属性を持つ場合)	トランスペアレント要素 (メディア要素を除く) (src 属性を持つ場合) 1つ以上の source 要素、およびその後にトランスペアレント要素 (メディア要素を除く) (src 属性を持たない場合)	ビデオの挿入に使用する (音声もありえる)。 embed と異なり、プラグインを使わずにビデオコンテンツを貼り付けることができる。 JavaScript による操作、CSS によるエフェクトも可能。
audio	flow content phrasing content embedded content interactive content (controls 属性を持つ場合)	トランスペアレント要素 (メディア要素を除く) (src 属性を持つ場合) 1つ以上の source 要素、およびその後にトランスペアレント要素 (メディア要素を除く) (src 属性を持たない場合)	音声の挿入に使用する。
source	なし	なし	メディア要素のメディア・リソースを指定する。 これは、複数指定することができる。 メディア要素の src 属性が指定されている場合、source 要素は無視される。 メディア要素の src 属性が指定されずに source 要素が指定された場合、source 要素で指定されたメディア・リスースを順番に再生していく (属性が正しくないものや、対応しないタイプのもの、リソースをダウンロードできない場合はスキップされる)。
canvas	flow content phrasing content embedded content	トランスペアレント	ビットマップキャンバスを表示する。 グラフの描画、ゲームのグラフィック表示など。 ビジュアルメディアでない場合や、canvas に対するスクリプト処理が無効にされている場合、canvas 要素のサポートが無効になっている場合などは、フォールバック・コンテンツが表示される。

video 要素の属性 (グローバル属性を除く)

属性名	説明
src	メディアリソースのアドレス。
poster	ビデオデータの準備が完了するまで表示させておく画像ファイルのアドレス (ポスター・フレーム)。 ビデオが表示できなかったり、最初のフレームで一時停止したりしたときに使われる。 いったんビデオが表示されたら二度と表示されない。
preload	コンテンツのプリロード処理についての指定。 none ユーザーがメディアのリソースを持っている必要がないか、サーバーによけいな負担をかけたくない。 (つまり、プリロードしないでほしい) metadata ユーザーがメディアのリソースを持っている必要はないが、メタデータ (大きさ(ピクセル値)、最初のフレーム、トラックリスト、再生時間、など) を取得しておくのが望ましい。 auto (あるいは空欄) ユーザーの要求を優先させてもサーバーに影響は与えない。 (つまり、全部プリロードしてもかまわない) preload 属性が指定されていない場合のデフォルト値はブラウザ依存 (W3C は metadata を推奨)。
autoplay	ブール属性。 指定すると、再生可能になったら即座に再生する。
loop	ブール属性。 指定すると、ループ再生する。
controls	ブール属性。 指定すると、ブラウザの制御ボタンが表示される。 制作者側で操作スクリプトを用意する場合には、これを指定しない。
width	ビデオの幅。
height	ビデオの高さ。

audio 要素の属性 (グローバル属性を除く)

属性名	説明
src	(videoと同じ)
preload	(videoと同じ)
autoplay	(videoと同じ)
loop	(videoと同じ)
controls	(videoと同じ)

source 要素の属性 (グローバル属性を除く)

属性名	説明
src	メディア・リソースのアドレス。 必須。空欄禁止。
type	メディア・リソースのタイプを MIME タイプで指定する。
media	メディアクエリーを指定する。(参考: Media Queries) 省略した場合、デフォルト値 all (つまり、すべてのメディアに適したリソースという意味) となる。

canvas 要素の属性 (グローバル属性を除く)

属性名	説明
width	幅。 デフォルト値 300。
height	高さ。 デフォルト値 150。

例

(1)映像をダウンロードできなかった場合にエラーを表示させる例
W3C サイトに掲載されていた例を引用。

<script>

function failed(e)

{

// video playback failed - show a message saying why

switch (e.target.error.code) {

case e.target.error.MEDIA_ERR_ABORTED:

alert("ビデオの再生中止。");

break;

case e.target.error.MEDIA_ERR_NETWORK:

alert("テスト用アラート:\nネットワークエラーが発生しました。\nビデオ ファイルのダウンロードを中断しました。");

break;

case e.target.error.MEDIA_ERR_DECODE:

alert("テスト用アラート:\nビデオ再生に失敗しました。\nファイルが壊れ ているか、ビデオが使用している機能にブラウザが対応していない可能性がありま す。");

break;

case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:

alert("テスト用アラート:\nビデオをロードできません。\nサーバーへの接 続エラーか、ビデオフォーマットがサポートされていない可能性があります。");

break;

default:

alert('An unknown error occurred.');

break;

}

}

</script>

<p><video autoplay src="tgif.mpg" controls onerror="failed(event)"></vid eo></p>

<p><a href="tgif.mpg">ビデオファイルのダウンロード</a></p>

ビデオファイルのダウンロード

(2)ビットマップキャンバスに2つの矩形を描く
こちらは、MOZILLA サイトに掲載されていた例。
Firefox 以外で動作するかどうか不明。

<!-- フォールバック・コンテンツとして、canvas 非対応ブラウザへのメッセー ジを記述。-->

<canvas id="canvas01">このブラウザは、canvas の表示に対応していません。 </canvas>

<script type="text/javascript"><!--

// canvas ノードのコンテキストを取得

var ctx = document.getElementById('canvas01').getContext('2d');

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect(30, 30, 55, 50);

// -->

</script>

このブラウザは、canvas の表示に対応していません。