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つです。