【HTML5】videoタグによる動画埋め込みのまとめ

HTML5では、動画の埋め込みに<video>タグを使用します。
Flash等のプラグインを使わずに、シンプルなタグで動画を埋め込むことができるようになります。

デモ

上椎葉ダムの放流映像です。

デモ

HTML

基本タグ

基本のタグは非常にシンプルです。

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

代替テキスト

<video>タグをサポートしていないブラウザで見た時の為に、注意文を記載しておきます。

<video src="movie.mp4">
<p>ヌルいブラウザ使ってんじゃねえよ！</p>
</video>

動画ファイルを複数指定

再生できる動画形式が限られているブラウザの為に動画のフォーマットを複数準備して指定できます。

<video>
<source src="movie.mp4">
<source src="movie.webm">
<p>ヌルいブラウザ使ってんじゃねえよ！</p>
</video>

サイズとサムネイル画像を指定

poster=””でサムネイル画像、width・heightでサイズを指定できます。

<video poster="poster.jpg" width="320" height="180">
<source src="movie.mp4">
<source src="movie.webm">
<p>ヌルいブラウザ使ってんじゃねえよ！</p>
</video>

操作インターフェイスの表示

controls と追記することで、再生・停止などの操作パネルを表示できます。

<video poster="poster.jpg" width="320" height="180" controls>
<source src="movie.mp4">
<source src="movie.webm">
<p>ヌルいブラウザ使ってんじゃねえよ！</p>
</video>

自動再生、プリロード

autoplay の追記で自動再生になります。
preload=”metadata”と追記すると、再生前に動画ファイルをあらかじめ読み込みませて、すぐに再生できる状態にできます。

<video poster="poster.jpg" width="320" height="180" controls autoplay  preload="metadata">
<source src="movie.mp4">
<source src="movie.webm">
<p>ヌルいブラウザ使ってんじゃねえよ！</p>
</video>

スマホ用サイト等でバリバリ使おう

非常に使い勝手が良い<video>タグですが、対応しているブラウザはIE9以降の最近のブラウザ達です。
PCでの閲覧環境では、まだまだFlashに頼らざるを得ないですが、スマートフォンのブラウザは、ほとんどHTML5が使用出来ますので、動画を埋め込む際には是非使用してみてください。