ウェブランサー

<video> ページ内に動画コンテンツを表示する

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
フレージング・コンテント
パルパブル・コンテント
親にできる要素 埋め込みコンテンツを受け入れるすべての要素
子にできる要素 src属性を指定した場合、0個以上の<track>要素と、それに続くメディア要素を含まないトランスパレントコンテンツ。
その他の場合、0個以上の<source>、0個以上の<track>、メディア要素を含まないトランスパレントコンテンツ。
対応ブラウザ <video>の対応状況を確認する

<video>タグの説明

<video>は、ページ内に動画コンテンツを設置する場合に使用するタグです。動画ファイルは、この要素のsrc属性か、<source>タグを使って指定します。<source>要素を複数設置することでブラウザのサポート状況に応じた最適なファイルを再生させることが可能です。

<video>〜</video>の中には、 <video>タグがサポートされていない環境で表示させるメッセージを記述することができます。

<video>タグの特徴

<video>はページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

<video>タグに指定できる属性

src属性
動画ファイルのURLを指定します。
poster属性
動画ファイルが利用不可能な場合に表示される画像を指定します。この属性が指定されない場合、再生可能な映像データがなかった場合に何も表示されません。
preload属性
動画ファイルの読み込みについてブラウザの振る舞いを指定します。
autoplay属性
動画の再生について、この属性が指定された場合、データの読み込みが完了して再生可能な状態になった時点で、コンテンツの再生が始まります。
loop属性
動画の再生について、この属性が指定された場合、コンテンツが最後まで再生された後、自動的に先頭位置に戻ります。
controls属性
コンテンツを制御するための、再生、一時停止、音量、シーク、ポーズ等の各機能をコントロールするインターフェイスを表示します。
width属性
動画コンテンツの幅を指定します。
height属性
動画コンテンツの高さを指定します。

<video>タグの使い方とサンプル

<video>を使ったマークアップのサンプルです。

HTML
<video controls autoplay>
	<source src="foo.ogg" type="video/ogg">
	<source src="foo.mov" type="video/quicktime">
	Your browser does not support HTML5 video.
</video>

<video>に関連するHTMLタグ

コンテンツエンベット要素
<area> イメージマップの領域を指定する
<audio> ドキュメント内に音声コンテンツを埋め込む
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<embed> プラグインデータを埋め込む(NN独自)
<iframe> インラインフレームを作成する
<img> 画像を表示する
<map> 一つの画像に対して複数のリンクを設定する
<object> FLASHやデータを埋め込む
<param> パラメーターを指定する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<script> JAVAなどのスクリプトを埋め込む
<track> 動画や音声ファイルに字幕やキャプションを追加する
<video> ページ内に動画コンテンツを表示する