MP4の動画をサイトへ埋め込む時にvideoタグを使用すると簡単に行えます。
今回はvideoタグの使い方などの紹介をいたします。

videoタグについて

video要素はHTML5で新たに登場した要素です。
HTML5ではvideoタグを利用することで簡単に動画をサイトに載せることができます。

動画を埋め込む方法

動画を[video]タグで読み込む時は[img]タグと同様に[src]属性で動画データの場所を指定します。

<video src="○○.mp4"></video>

属性タグ

自動再生

[video]タグに[autoplay]属性を追加すると自動再生になりますが、[muted]属性と併用しなければChrome、Safari等一部のブラウザーでは自動再生されません。
[muted]属性は動画を無音にすることができ、この属性を設定しておくと電車内などでサイトを開いてしまったとしても無音なので心配ありません。

<video src="○○.mp4″ autoplay muted></video>

コントロールパネルを表示させる

[controls]属性を追加します。
この属性を指定しますと、再生・停止・音量など各機能を制御するコントロールを表示します。
自動再生で音声がついた動画をサイトに埋め込みたい場合はこの属性を追加しておくとユーザー側から音量を設定ができます。

<video src="○○.mp4″ controls></video>

幅と高さ

[width][height]を追加。
width＝幅、height＝高さとなっておりますので、ここに希望のサイズを設定してください。
%では設定ができずpxでしか設定できません。

<video src="○○.mp4″ width="500px" height="350px"></video>

ループ再生

[loop]を追加します。
自動再生を設定している場合は[loop]属性も併用して使う場合が多いです。

<video src="○○.mp4″ autoplay muted loop></video>

サムネイル画像

[poster]属性を設定すると、動画が再生される前のサムネイル画像のように画像を設定できます。

<video src="○○.mp4″ poster="thumb.jpg" controls></video>

[poster]属性は[controls]属性と併用して使用し、ユーザーが再生ボタンを押せるようにしましょう。

再生画面の領域

スマホで動画を再生したときに自動で全画面表示になる事がありますが、[playsinline]属性を設定していると自動で全画面表示されないようにすることができます。
こちらの再生方法はWEBサイトを見ながら再生できるインライン再生と呼びます。
下記のように[autoplay]属性と[muted]属性を併用しないとインライン再生は行うことができません。

<video src="○○.mp4" autoplay muted playsinline></video>

各ブラウザに対応させる

videoタグに設定した動画ファイルをどのブラウザでも再生するように複数の動画ファイルを用意して設定する方法があります。

<video controls>
<source src="○○.mp4" />
<source src="○○.webm" />
<source src="○○.ogg" />
※現在、こちらの動画再生に対応していない環境です。 <!-- 動画が再生されない時のメッセージ --> </video>

videoタグを使用すれば動画を簡単に埋め込むことができ、属性によって自動再生など設定することができます。
動画を埋め込む際にぜひ使用してみてください。