##videoタグで動画を埋め込む
イメージ的にはimgタグで画像を扱うような感じです。
videoタグでHTMLに動画を埋め込む場合には、例えば以下のように記述します。
index.html
<video src="movie.mp4"></video>
##sourceタグの使用とユーザー環境への配慮
sourceタグを使用することで、ブラウザに再生させたい動画を提示できます。
また、sourceタグでは、フォーマットの異なる動画データを複数指定することができます。
このことにより、ブラウザは記述された順に、再生可能なデータを利用するので
より多くの環境で動画を視聴してもらえる可能性が高くなります。
index.html
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<source src="movie.webm">
</video>
##videoタグの様々な属性
videoダグの属性は、主に4つです。
###1. poster属性
ユーザー環境で利用できる動画が無い場合に
表示させる画像ファイルを指定することができます。
index.html
<video src="movie.mp4" poster="samnail.jpg"></video>
###2. controls属性
再生・一時停止・再生位置の移動・ボリュームなど
動画を利用しやすくするインターフェースを、
ブラウザが自動で表示することができます。
index.html
<video src="movie.mp4" controls></video>
###3. autoplay属性
ウェブページを読み込んだ時点で、動画が自動再生されます。
index.html
<video src="movie.mp4" autoplay></video>
###4. preload属性
ウェブページを読み込んだ時点で動画を裏側で読み込みます。
動画をあらかじめ読み込んでおくことで、ユーザーが再生ボタンを押したときに
動画の再生がスムースになる…かもしれません。
index.html
<video src="movie.mp4" preload="none"></video>
ユーザーが動画をあまり必要としていないことが想定される場合や、
サーバに余分な負担を掛けたくない場合には
preload="none" を指定すると良いそうです。
##最終的に私が書いたコード
index.html
<div class="movies">
<video controls autoplay poster="images/samnail.jpg" width="320" height="240">
<source src="images/movie.mp4">
</video>
</div>
##実際のブラウザでは
##まとめ
- HTMLに動画を埋め込む場合には、videoタグで実装可能です。
- sourceタグを使用することで、より多くの環境で動画を視聴してもらえる可能性が高くなります。
- videoダグの属性は、『poster属性』『controls属性』『autoplay属性』『preload属性』の4つです。