videoタグ
videoタグは、HTMLページにビデオを追加することを可能にします。
また、これを使用してそのビデオを制御することもできます。
ビデオファイルへのパスは、
属性srcまたはネストされたsourceタグで指定します。
ビデオ再生を制御するプレーヤーを表示させたい場合は、
属性controlsを追加する必要があります。
これがないと、何も表示されず、音声や画像も再生されません。
時には、サイト自体にビデオを配置することは
あまり便利ではありません（たとえば、ホスティングに
サイトサイズの制限がある場合など）。その場合、
ビデオをYouTubeにアップロードし、
iframeタグを使用して埋め込むことができます。
属性
| 属性 | 説明 |
|---|---|
src |
ビデオファイルへのパスを指定します。
ただし、この目的にはsourceタグを使用する方が良いでしょう
（この場合、異なるフォーマットでビデオを指定できます）。
|
preload |
サイトページの読み込みと同時にビデオファイルをロードするために使用されます。
取り得る値： none（ファイルをロードしない、デフォルト）、
metadata（再生時間などのメタデータ情報のみをロード）、
auto（HTMLページの読み込み時にビデオ全体をロード）。
|
autoplay |
ページの読み込みが完了するとすぐに音声の再生が開始されます。
この場合、preload属性は無視されます。
値なし属性。 |
controls |
ビデオにコントロールパネルを追加します。
値なし属性。 デフォルト（属性がない場合）はパネルは追加されません。 |
loop |
音声を「ループ」再生します：
再生が終了すると、最初から再び再生を開始します。
値なし属性。 デフォルト（属性がない場合）は、録音は 1回のみ再生されます。
|
poster |
ビデオが利用できない、または再生されていないときに表示される画像へのパス。
poster属性が指定されていない場合、ブラウザはビデオの最初のフレームを表示しようとします。
|
height |
height属性は、ビデオクリップの再生領域の高さを指定します（ピクセルまたはパーセント単位）。
ビデオ自体は、指定された高さに合わせてサイズを拡大または縮小しますが、
その際、アスペクト比は維持されます。
デフォルト値： 高さはビデオのパラメータから取得されます。 この値が利用できない場合、 height属性の値は、
poster属性の画像の高さと同じと見なされます。
posterも指定されていない場合、高さは150ピクセルに設定されます。
|
width |
width属性は、ビデオクリップの再生領域の幅を指定します（ピクセルまたはパーセント単位）。
ビデオ自体は、指定された幅に合わせてサイズを拡大または縮小しますが、
その際、アスペクト比は維持されます。
デフォルト値： 幅はビデオのパラメータから取得されます。 この値が利用できない場合、 width属性の値は、
poster属性の画像の幅と同じと見なされます。
posterも指定されていない場合、幅は150ピクセルに設定されます。
|
例 . サイトページ上のプレーヤー
ページにビデオプレーヤーを追加してみましょう。
videoタグをサポートしていないブラウザのために、
その旨の特別なメッセージを残しています：
<video src="moovie.mp4" controls>
お使いのブラウザはHTML5のvideoをサポートしていません。
</video>
例 .
videoタグに
sourceタグを追加してみましょう：
<video>
<source src="moovie.mp4" controls>
お使いのブラウザはHTML5のvideoをサポートしていません。
</video>
