HTML5を利用すると、videoタグを利用することによって、動画の埋め込みが可能となりjます。

基本的な記述は以下になります。

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

また、以下のように記述することでvideoタグがサポートされていない環境でのメッセージ表示を指定ができます。

<video src="movie.mp4">
<p>videoタグがサポートされていないブラウザです。</p>
</video>

そして、HTML5から新たに追加されたsourseタグを使用することによって、ブラウザに動画の再生候補を提示することもできます。

これによりブラウザは、記述順に再生可能なデータを利用する為、より多くの環境で動画を視聴できる可能性が高まります。

<video>
<source src='movie.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'>
<p>videoタグがサポートされていないブラウザです。</p>
</video>

また、ユーザー環境で利用可能な動画がない場合は、poster属性を利用して指定の画像を表示させることも可能です。例えば動画の開始箇所のフレーム等を画像にして利用します。

<video src="movie.ogv" poster="movie.jpg"></video>

controls属性を指定することで、再生・一時停止・ボリューム等のインターフェースを表示させることも可能です。

<video src="movie.ogv" controls></video>

autoplay属性を利用すると、ページを読み込んだ時点で動画の自動再生が可能になります。

<video src="movie.ogv" autoplay></video>

preload属性
はウェブページを読み込んだ時に裏側で動画を読み込ませるための記述です。

しかし初期値はあらかじめ読み込まれる設定になっていますので、もし、ユーザーが逆に動画をあまり必要としていなかったりする場合等にサーバーにかかる負担を減らすとき等に、下記の記述をして、裏側で読み込ませないように設定します。

また、preload=”metadata”と指定すれば、動画全体ではなく、動画サイズ・最初のフレーム・再生時間等の動画のメタデータのみ取得できます。

<video src="movie.ogv" preload="none"></video>

また、各ブラウザでサポートしている動画が異なります。

動画形式としては主なものが3つあります。

  • MP4形式動画
  • WebM形式動画
  • OGV形式動画

この3種類があるものの、実質的にはMP4とWebMがあれば現在はすべてのブラウザで再生可能となっております。

※今後OGVの対応化も進んでいるようですので、合わせてこちらの形式を利用しておくとさらに安全かと思います。