マルチメディア > ビデオ /// HTML5チュートリアル（メモ）

マルチメディア > ビデオ

以下のサンプルコードは，"video.mp4" (MPEG4形式)，または"video.ogg" (OGG形式)の動画ファイルを再生するためのビデオプレイヤーをブラウザに表示するサンプルです．

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ビデオを再生する（サンプル）</title>
<meta name="Author" content="Scyphus Solutions Co. Ltd." />
<meta name="copyright" content="(C) 2011 Scyphus Solutions Co. Ltd.  All rights reserved." />
</head>
<body>
<video controls="controls" id="myVideo" preload="auto" preload="preload" width="640" height="480">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
This page requires the video tag support on your browser.
</video>
</body>
</html>

なお，videoタグは次の属性（attribute）をサポートしています．

属性	属性値	説明
src	URL	動画ファイルのURLを指定します．上記の例のように，この属性の代わりにsourceタグで1つ以上の動画ファイルを指定することもできます．複数の動画ファイルを指定することで，ブラウザは対応しているメディアタイプの動画ファイルを選択し，適切に読み込みます．
controls	controls	ビデオプレイヤー（コントローラ）を表示します．
autoplay	autoplay	読み込み完了時に自動再生します．
loop	loop	繰り返し再生を有効にします．
preload	auto metadata none	再生前の事前読み込みを設定します．この属性は初期のHTML5ではautobuffer属性の真偽値により定義されていましたが，preloadに取って代わりました．
width	pixel	ビデオプレイヤーの幅を指定します．
height	pixel	ビデオプレイヤーの高さを指定します．
muted	muted	ビデオプレイヤーの音声をミュートします．
poster	URL	ビデオのダウンロードが完了するまで表示される画像のURLを指定します．

また，videoタグ内に使用できるsourceタグは次の属性（attribute）をサポートしています．

属性	属性値	説明
src	URL	動画ファイルのURLを指定します．
media	media_query	Media queryを指定します．この属性が省略された場合の初期値は"all"です．
type	MIME type	指定した動画ファイルの"video/mp4"のようなMIMEタイプを指定します．

詳細はW3Cのページをご覧ください．