ビデオを再生するには?
videoタグの書式
videoタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
videoタグの属性一覧
属性 | 内容 |
グローバル属性 | ※グローバル属性のページを参照してください。 |
src | 再生するビデオファイルのパスを指定します。 |
preload | ページロード(読み込み)時に、ビデオデータをあらかじめ読み込むかどうかの指定をします。 指定できる値は次の通りです。 「none」:なし 「metadata」:メタデータのみ読み込む 「auto」:自動 なお、値にブランクを指定した場合(preload="")、「auto」と同様と見なされます。 |
autoplay | ビデオデータ読み込み後に自動再生を行うように指定します。 この属性を有効にするには 「autoplay」 「autoplay="autoplay"」 「autoplay=""」 のいずれかを指定します。 |
mediagroup | グループ名を指定します。複数のメディアを連携させるときに使います。 |
loop | ループ(繰り返し)再生を行うように指定します。 この属性を有効にするには 「loop」 「loop="loop"」 「loop=""」 のいずれかを指定します。 |
muted | ミュート(消音)再生を行うように指定します。 この属性を有効にするには 「muted」 「muted="muted"」 「muted=""」 のいずれかを指定します。 |
controls | 音声再生用のコントロールが表示されるように指定します。 この属性を有効にするには 「controls」 「controls="controls"」 「controls=""」 のいずれかを指定します。 |
poster | ビデオファイルが利用できない場合、表示させるイメージファイルのパスを指定します。 |
height | 再生エリアの高さを指定します。 指定しない場合、デフォルト値の「150」となります。 |
width | 再生エリアの幅を指定します。 指定しない場合、デフォルト値の「300」となります。 |
videoタグの解説
<video>タグは、ビデオを再生するための要素です。
この要素を使用することで、プラグインを使用することなく、ビデオの再生を行うことができます。
「controls」属性を指定することで、一時停止/再生などの操作を行うコントロールを表示させることも可能です。
再生するビデオファイルは「src」属性で指定可能ですが、複数指定する場合は<source>要素を使用して指定してください。
<video>~</video>の中には、<video>をサポートしていないブラウザで表示するメッセージ(代替コンテンツ)を入れることができます。
なお現在のところ、ブラウザによって再生可能なビデオファイルのフォーマットが異なるので注意してください。
1種類のビデオを、より多くのブラウザに対応させたい場合は、<source>要素で複数のフォーマットのビデオファイルを指定して対応してください。
videoタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
<style type="text/css">
.sample {
font-size: 1.2em;
color: gray;
margin: 2px;
}
</style>
</head>
<body>
<header>
<h1>ビデオ再生</h1>
</header>
<section>
<h1 class= "sample">sample_video</h1>
<video width="320" height="240" poster="poster.jpg" autoplay controls loop muted>
<source src="video1.mp4" type="video/mp4" media="all">
<source src="video1.webm" type="video/webm" media="all">
<source src="video1.ogg" type="video/ogg" media="all">
<p>このブラウザではビデオを再生できません。</p>
</video>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
videoタグのサンプル画面1
videoタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
<style type="text/css">
.sample{
font-size: 1.2em;
color: gray;
margin: 2px;
}
</style>
</head>
<body>
<header>
<h1>Video</h1>
</header>
<section>
<h1>マイ ビデオ</h1>
<section>
<h1 class = "sample">ビデオ1</h1>
<video width="320" height="240" poster="poster.jpg" controls preload = "metadata" mediagroup = "myvideo">
<source src="video1.mp4" type="video/mp4" media="all">
<source src="video1.webm" type="video/webm" media="all">
<source src="video1.ogg" type="video/ogg" media="all">
<p>このブラウザではビデオを再生できません。</p>
</video>
</section>
<section>
<h1 class = "sample">ビデオ2</h1>
<video width="320" height="240" poster="poster.jpg" controls preload = "metadata" mediagroup = "myvideo">
<source src="video2.mp4" type="video/mp4" media="all">
<source src="video2.webm" type="video/webm" media="all">
<source src="video2.ogg" type="video/ogg" media="all">
<p>このブラウザではビデオを再生できません。</p>
</section>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
videoタグのサンプル画面2
videoタグの関連項目