video

提供: ASCII.jp HTMLリファレンス

ver.9~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 動画の再生
読み方 ビデオ

カテゴリー

フロー・コンテンツ/フレージング・コンテンツ/エンベディッド・コンテンツ/controls属性がある場合はインタラクティブ・コンテンツ

親にできる要素/カテゴリー

エンベディッド・コンテンツが期待される個所

子にできる要素/カテゴリー

src属性がある場合は、0個以上のtrack要素と、それに続いてトランスペアレント。ただし子孫にmedia要素を持たない
src属性がない場合は、0個以上のsource要素と、それに続いて0個以上のtrack要素、さらに続いてトランスペアレント。ただし子孫にmedia要素を持たない

<video 属性="値">~</video>

属性 概要
src URL 動画のアドレス
poster URL 再生可能でないときに表示する画像のアドレス
preload 文字列 動画の先読み方法
autoplay 論理値 自動再生するかどうか
mediagroup 文字列 複数のメディア要素の連携
loop 論理値 繰り返し再生するかどうか
muted 論理値 音を出さないようにするかどうか
controls 論理値 再生コントロールを表示するかどうか
width 文字列 動画の幅
height 文字列 動画の高さ

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 video要素は、動画やキャプション付きの音声を再生します。

 src属性で、動画などのリソースのアドレスを指定します。src属性を使わずに、video要素内にsource要素を入れて、リソースのアドレスを複数指定する方法もあります。
 執筆時点では、Webブラウザーごとに、対応する動画ファイルのフォーマットが異なります(下表)。source要素を複数指定して、Webブラウザーごとに対応した動画ファイルを用意するとよいでしょう。

Webブラウザ WebM Ogg Theora H.264
Internet Explorer 9
Firefox 7
Safari 5.1
Google Chrome 14
Opera 11.5

 poster属性は、動画が表示できないときに、代わりに表示する画像のアドレスを指定します。

 preload属性は、動画の読み込み方法を指定します。表の値を指定できます。ただし、実際の動作はWebブラウザーに依存します。

動作
none 通信を抑える
metadata メタデータ(サイズや長さなどの情報)だけを先読みする
auto 動画全体を先読みする

 mediagroup属性では、複数の動画を1つにまとめて扱う際に、そのグループの名前を指定します。

 loop属性は論理属性です。この属性を指定すると、同じ動画を繰り返し再生します。

 muted属性は論理属性です。この属性を指定すると、音声を出さずに再生します。

 control属性は論理属性です。この属性を指定すると、再生コントローラ(再生ボタンや停止ボタンなど)が表示されます。再生コントローラのデザインは、Webブラウザーによって異なります。

 width属性とheight属性では、動画の幅と高さをピクセル単位で指定します。

 video要素に対応しないWebブラウザーを考慮して、video要素の中にフォールバック用の一般のコンテンツを入れられます。video要素に対応したWebブラウザーでは、そのコンテンツは表示されません。

 なお、Internet Explorer 8はVideo要素には対応していません。

サンプル

(body要素の内部のみ掲載)

<h1>video要素の例</h1>
<p>
<video width="427" height="240" poster="fireworks.png" autoplay controls>
<source src="fireworks.mp4" type="video/mp4">
<source src="fireworks.ogv" type="video/ogg">
<source src="fireworks.webm" type="video/webm">
このWebブラウザは動画の再生に対応していません。
</video>
</p>

サンプル実行画像

Internet Explorer 9での表示例

Firefox 6での表示例

Google Chrome 14での表示例

Safari 5.1での表示例

Opera 11.5での表示例

Powered by Web Professional

目次