HTML5のタグで動画を簡単に配置する方法

HTML5で追加された<video>タグは、ページ上に簡単に動画を配置することができます。

<video>タグはInternet Explorer 9から対応していますので、windows XPがほぼ撲滅された2015年現在、対応ブラウザを気にせず使えるかと思います。

動画のフォーマットに関しては、デスクトップ・モバイル含めすべてのブラウザがmp4形式（H.264）の再生に対応していますので、mp4形式一択でいいかと思います。

１．デモ

ページに貼り付ける動画を用意しておきましょう。
テストサイトとして動画の貼り付けを試したい場合には、以下のサイトでテスト用動画を入手するといいかと思います。

手順１　以下のタグを記述し、src属性には準備した動画ファイルのパスを指定してください。

<video src="sample.mp4" controls></video>

以上です。とても簡単です。

<video>タグには、動画再生の詳細を指定する以下のような属性があります。適宜組み合わせて利用してください。

複数指定する場合には属性と属性の間に半角スペースをおいて記述します。

<video src="sample.mp4" controls autoplay loop></video>

autoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されます。

<video src="sample.mp4" autoplay></video>

loop属性を指定すると、動画をループ再生させることができます。

<video src="sample.mp4" loop></video>

controls属性を指定すると、再生・一時停止・再生位置の移動・ボリューム・全画面表示など、動画を利用しやすくするインターフェースをブラウザが自動で表示します。

<video src="sample.mp4" controls></video>

poster属性は、動画のサムネイル画像ファイルを指定することができます。poster属性を指定しない場合には、ブラウザは動画の１フレーム目をサムネイル画像として表示します。

<video src="sample.mp4" poster=”sample.jpg”></video>

preload属性は、ウェブページを読み込んだ時点で動画をバックグラウンドで読み込むかどうかを指定できます。初期値はpreload=”auto”で、一般的なブラウザではpreload属性を指定しなくても動画はあらかじめ読み込まれます。

preload=”metadata”を指定すると、動画全体ではなく、動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得します。

もし、ユーザーが動画をあまり必要としていないことが想定される場合や、ウェブサーバに余分な負担を掛けたくない場合に指定すると良いでしょう。

<video src="sample.mp4" preload="metadata"></video>

以下、参考サイトです。