HTML5の特徴的なタグの一つにvideo要素があります。video要素は動画を表示するための要素で、今までのHTMLとははっきりと違う機能の一つです。
今回はそのvideo要素を使って動画を埋め込む方法を紹介します。
要素の埋め込み方
videoタグの埋め込み方はとてもシンプルで以下のように記述します。
|
1 |
<video src="sample.mp4"></video> |
表示は以下のようにされます。
videoタグのsrc属性で指定できる動画の形式はMP4とWebM、OGV形式です。（ブラウザによってサポートされている形式が異なります。）
videoタグで指定する方法の他には、videoタグの中のsourceタグで指定することもできます。
|
1 2 3 4 |
<video> <source src="example.mp4"> <source src="example.webm"> </video> |
複数指定することで、再生できなかった場合はつぎのsourceで表示することができます。このように複数指定するのはブラウザによって対応状況が違うからで、対応できなかった場合のことを考慮しています。
つけられる属性
autoplay属性
autoplay属性は自動で動画が再生されるようにするための属性です。
loop属性
loop属性を追加すると動画が自動でループします。
poster属性
poster属性はその動画のヒントとなる画像を指定します。
以下のように指定します。
|
1 |
<video src="sample.mp4" poster=“sample.jpg"></video> |
control属性
controle属性は動画再生のインターフェースを表示します。この属性がつくことによって動画を自由に再生・一時停止・音声のオンオフができるようになります。
preload属性
preload属性をつけることにより、動画を先読みするようにします。先読みすることにより動画の再生をすぐに行えるようになり、ユーザに良い体験をもたらします。
|
1 |
<video src="sample.ogv" preload=“auto"></video> |
