組み込みコンテンツ要素（3/4）

video要素（ビデオ）

カテゴリ	フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、controlsコンテンツ属性が存在する場合はインタラクティブ・コンテンツ
コンテンツモデル	srcコンテンツ属性が存在する場合はトランスペアレント。 srcコンテンツ属性が存在しない場合は、1つ以上のsorce要素。その次にトランスペアレント。どちらにしても、この要素の中にvideo要素やaudio要素は入れてはいけない。
利用可能な場所	エンベッディッド・コンテンツが期待される場所
開始タグ	必須
終了タグ	必須
要素固有のコンテンツ属性	src（ビデオ・ファイルのアドレスを指定） poster（ビデオが利用可能になる前に表示させたい画像ファイルのアドレスを指定） autobuffer（ユーザによってビデオが最後まで再生される可能性が高いことをユーザエージェントに伝える論理属性） autoplay（ビデオが利用可能になったらすぐに再生を開始することを指示する論理属性） loop（ビデオの再生が終わったら最初に戻って再生を続けることを指示する論理属性） controls（ビデオでの再生や停止などのユーザ・インターフェイスを表示させることを指示する論理属性） width（ビデオの横幅を指定） height（ビデオの縦幅を指定）
デフォルトスタイル	-

video要素は、プラグインなしにビデオをウェブ・ページに組み込むことができます。プラグインは、開発した企業のテクノロジーに委ねられますので、将来的にどのようになるか不明です。しかし、プラグインなしでビデオが再生できることで、開発側のテクノロジーに委ねることなく、将来的に問題ないことが利点です。また、スタイルシートを適用でき、JavaScriptからビデオを制御できるメリットも期待できます。

■利用例

  <video src="test.mp4" controls="controls">
  	<p>video要素に対応していません。<a href="test.mp4">ここ</a>をクリック
  	して再生できます。</p>
  </video>
    

利用例をvideo要素をサポートしているsafariでレンダリングすると下図のように表示されます。

video要素をサポートしていないIE8でレンダリングすると下図のように、対応していない旨のメッセージが表示され、フォールバック・コンテンツ内でビデオが表示されるリンクを表示します。リンクをクリックすると再生用のアプリケーションが表示され、その中でビデオが再生されます。

video要素は、srcコンテンツ属性を使ってビデオ・ファイルを指定しますが、これだけでは再生されません。利用例から分かるように、ビデオを制御できるインターフェイスが必要となるため、controlsコンテンツ属性をセットしておきます。controlsコンテンツ属性は論理属性で、このコンテンツ属性を一緒にセットしておかないと、Javascriptなしでは再生できないので注意してください。

video要素には、再生などを制御するコンテンツ属性がいくつかあります。それを紹介します。

★ autoplayコンテンツ属性

このコンテンツ属性をセットすることで、ビデオ再生の準備ができたら、自動的にビデオが再生されます。

■利用例

  <video src="test.mp4" controls="controls" autoplay="autoplay">
  	<p>video要素に対応していません。<a href="test.mp4">ここ</a>をクリック
  	して再生できます。</p>
  </video>
    

一般的に、autoplayコンテンツ属性はセットしておくと便利です。利用シーンによって、セットの是非を考えることも必要ですが、特に理由がなく、いちいち再生ボタンを押させることが煩わしいと思える場面であれば、このコンテンツ属性はセットしておきましょう。

★ autobufferコンテンツ属性

ブラウザ側に、ビデオ・データを事前にバッファすることを期待したものです。ただし、autoplayコンテンツ属性がセットされている場合は、無効になります。

このコンテンツ属性をセットしておくことで、事前にビデオ・データがダウンロードされ、ユーザがビデオを再生する時には、ある程度のビデオ・データがロード済みなので、その範囲内であれば再生や早送りなどが可能となります。

■利用例

  <video src="test.mp4" controls="controls" autobuffer="autobuffer">
  	<p>video要素に対応していません。<a href="test.mp4">ここ</a>をクリック
  	して再生できます。</p>
  </video>
    

autobufferコンテンツ属性をセットすると、ブラウザ側の負荷に繋がり、ネットワーク上でも無駄な負荷を与えてしまうことも考えられます。特に大きなサイズのビデオ・データでは懸念されます。
autobufferコンテンツ属性をセットしなくても、通常はビデオ再生開始時にもたつきのないように、ビデオ再生が開始される前から、ある程度のビデオ・データはダウンロードされます。

★ posterコンテンツ属性

ポスター・フレームとは、ビデオ生成の準備ができる前に表示させたい画像を表示することができることで、posterコンテンツ属性をセットすることで実現できます。このコンテンツ属性に画像ファイルのURLを指定します。

■利用例

  <video src="test.mp4" controls="controls" poster="img/pic.png">
  	<p>video要素に対応していません。<a href="test.mp4">ここ</a>をクリック
  	して再生できます。</p>
  </video>
    

posterコンテンツ属性を使うと、ビデオの準備が完了するまでの間は指定された画像が表示されますが、さほど長い時間ではありません。しかし、ブラウザがvideo要素には対応しているものの、指定しているビデオ・データの形式（種類）に対応していない場合は、ポスター・フレームが表示されることになります。

★ loopコンテンツ属性

loopコンテンツ属性をセットすると、自動的にビデオを繰り返して再生します。

■利用例

  <video src="test.mp4" controls="controls" loop="loop">
  	<p>video要素に対応していません。<a href="test.mp4">ここ</a>をクリック
  	して再生できます。</p>
  </video>
    

★ widthコンテンツ属性とheightコンテンツ属性

これらのコンテンツ属性をセットすると、video要素によってレンダリングされる領域の横幅と縦幅を指定できます。
ビデオは、この領域の中でぴったりと収まる形で伸縮されて表示されます。実際のビデオ・データの縦横比を異なって指定した場合は、左右に余白ができます。

■利用例

  <video src="test.mp4" controls="controls" width="100" height="120">
  	<p>video要素に対応していません。<a href="test.mp4">ここ</a>をクリック
  	して再生できます。</p>
  </video>
    

audio要素（オーディオ）

カテゴリ	フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、controlsコンテンツ属性が存在する場合はインタラクティブ・コンテンツ
コンテンツモデル	srcコンテンツ属性が存在する場合はトランスペアレント。 srcコンテンツ属性が存在しない場合は、1つ以上のsorce要素。その次にトランスペアレント。どちらにしても、この要素の中にvideo要素やaudio要素は入れてはいけない。
利用可能な場所	エンベッディッド・コンテンツが期待される場所
開始タグ	必須
終了タグ	必須
要素固有のコンテンツ属性	src（オーディオ・ファイルのアドレスを指定） autobuffer（ユーザによってオーディオが最後まで再生される可能性が高いことをユーザエージェントに伝える論理属性） autoplay（オーディオが利用可能になったらすぐに再生を開始することを指示する論理属性） loop（オーディオの再生が終わったら最初に戻って再生を続けることを指示する論理属性） controls（オーディオでの再生や停止などのユーザ・インターフェイスを表示させることを指示する論理属性）
デフォルトスタイル	-

audio要素は、プラグインなしでオーディオをウェブ・ページに組み込むことができます。

■利用例

  <audio src="test.mp3" controls="controls">
  	<p>audio要素に対応していません。<a href="test.mp3">ここ</a>をクリック
  	して再生できます。</p>
  </audio>
    

利用例を見ると、srcコンテンツ属性で音声・データのURLを指定し、controlsコンテンツ属性で音声を制御できるインターフェイスを提供できます。

audio要素をサポートしているブラウザでは、下図（ブラウザはSafari）のようにレンダリングされます。

audio要素をサポートしていないブラウザでは、下図（ブラウザはIE8）のようにレンダリングされます。

audio要素は、video要素と同様にcontrolsコンテンツ属性をセットすることで、音声データを再生できます。また、ブラウザがこの要素に対応していないことを想定して、audio要素の中にフォールバックできるコンテンツを入れておきます。
audio要素には、autobufferコンテンツ属性、autoplayコンテンツ属性、loopコンテンツ属性が規定されていますが、使いかたはvideo要素と同じです。

source要素（メディア・ソース）

カテゴリ	なし
コンテンツモデル	空
利用可能な場所	video要素またはaudio要素の子として。ただし、これらの要素の中に入れられたフロー・コンテンツより前に入れる必要がある。
開始タグ	必須
終了タグ	禁止（ただし、<source />は表記可）
要素固有のコンテンツ属性	src（ビデオやオーディオのファイルのアドレスを指定） type（ビデオやオーディオのファイルのMIMEタイプを指定） media（ビデオやオーディオのメディア・タイプを指定）
デフォルトスタイル	source{     display:none; }

source要素は、video要素やaudio要素で再生するメディア・ファイルを指定するために使います。srcコンテンツ属性はメディア・ファイルのURLを指定し、必須となります。

video要素やaudio要素のsrcコンテンツ属性では、1つしかメディア・ファイルが指定できませんが、source要素を使うことで、複数のメディア・ファイルを指定することが可能となります。なお、source要素は、video要素とaudio要素の中でしか使うことはできません。

■利用例

  <audio controls="controls">
  	<source src="demo.mp3" type="audio/mp3" />
  	<source src="demo.aac" type="audio/aac" />
  	<source src="demo.ogg" type="audio/ogg" />
  	<p>このブラウザで再生できませんので、<a href="demo.mp3">ここ</a>をクリック
  	してご利用ください。</p>
  </audio>
    

source要素を複数指定しますが、ブラウザは上から順にチェックしていき、最初に再生可能と判断されたものだけが、実際に再生されます。audio要素をサポートしていないブラウザは、すべてのsource要素は無視され、後ろにマークアップされたフォールバック・コンテンツのリンクが表示されます。

★ typeコンテンツ属性

メディア要素（video要素やaudio要素）のtypeコンテンツ属性は、メディア・ファイルのMIMEタイプを指定します。必須ではありませんが、ブラウザが事前に再生可能かどうかを判断するヒントとなります。
通常は、video/mp4、audio/mp3などと表記しますが、コーデックを指定することも許されています。その場合は、video/mp4などの直後にセミコロン入れて、その次にcodec="を使ってコーデックの種類をマークアップします。

■利用例

  <source src="demo.mp4" type='video/mp4;codecs="mp4v.20.8,mp4a.40.2"' />
    

★ mediaコンテンツ属性

このコンテンツ属性は、source要素をスクリーンやテレビなどの特定のメディアだけに適用したい場合に使います。使い方はstyle要素のmedia要素と同じです。

■利用例

  <video controls="controls">
  	<source src="pcmedia.ogg" type="video/ogg" media="screen" />
  	<source src="tvmedia.mp4" type="video/mp4" media="tv" />
  	<p>このブラウザで再生できませんので、<a href="tvmedia.mp4">ここ</a>をクリック
  	してご利用ください。</p>
  </video>
    

利用例は、pcmedia.oggはパソコン向け、tvmedia.mp4はテレビ向けとして優先されて再生されます。