<video>動画を再生する

<video>タグは、ビデオなどの動画やキャプション付きの音声を表示、再生する際に使用します。

これまでのHTMLではFLASHなどのプラグインを利用する必要がありましたが、HTML5ではプラグインをインストールしてもらうことなく、<video>タグを使う事で動画を再生することができるようになります。 またプラグインに依存しないため、JavascriptやCSSで制御することもできます。

使い方は、<video>タグのsrc属性でリソースのurlを指定するか、src属性を使用せずに<video>~</video>内にsource要素を配置し、リソースのurlを複数指定する方法などがあります。 また<video>に未対応のブラウザのために、video要素の子要素として代替コンテンツを配置することもできます。 これはvideo要素に対応したブラウザでは表示されません。

<video>タグでは、次のような事ができます。

controls属性で動画コントロールを表示

controls属性を指定すると、再生ボタンや停止ボタン、音量などの再生コントローラを表示することができます。 再生コントローラのデザインはブラウザによって異なります。

またcontrols属性やautoplay属性を指定しない場合は、動画の再生ができない場合があるので注意して下さい。

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

autoplay属性で動画を自動再生

autoplay属性を指定すると、動画が再生可能になった時点で動画が自動再生されます。

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

poster属性でポスターフレームを指定

poster属性では、動画が表示できない際に、代わりに表示する画像を指定することができます。 また動画の再生が始まるまでの一時的な準備用画像としても利用されるようです。

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

HTML5での変更点

video要素は、HTML5から新しく追加されました。
またHTML5.1の場合は、mediagroup属性が廃止されています。

書式

  • <video 属性="値">~</video> ……… 動画を再生する

属性

src="" 動画ファイルのurlを指定
poster="" 再生可能でない時に、動画の代わりに表示する画像のurlを指定
preload="" 動画の読み込み方法を指定
  • none …… 先読みしない
  • metadata …… メタデータ(サイズや長さなど)のみを先読みする
  • auto …… 動画全体を先読みする
autoplay 自動再生する
mediagroup="" 複数の動画をひとつにまとめる際に、そのメディアグループの名前を指定する
loop 動画を繰り返し再生する
muted 音声を出さずに再生する
controls 再生コントローラを表示する
width="" 動画の幅をピクセル数で指定
height="" 動画の高さをピクセル数で指定

使用した時の例

<video poster="sample.jpg" width="320" height="180" controls>
<source src="sample.mp4" type="video/mp4">
<source src="sample.ogv" type="video/ogg">
<source src="sample.webm" type="video/webm">
<p>このブラウザでは動画を再生できません</p>
</video>

対応ブラウザなどのデータ

形式 <video>~</video> カテゴリ フローコンテンツ,フレージングコンテンツ,エンベデッドコンテンツ,インタラクティブコンテンツ(controls属性がある場合),パルパブルコンテンツ
親要素 エンベデッドコンテンツが期待される場所 子要素 src属性がある場合は0個以上のtrack要素とトランスペアレント
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~