<video> …… ビデオを表す

<video>タグは、ビデオを表す際に使用します。

video要素は、動画、映画、キャプション付きのオーディオファイルなどを再生するために使用されます。

<video>～</video>のなかに記述するvideo要素の内容は、 video要素をサポートしているブラウザでは表示されません。 video要素の内容は、video要素をサポートしていない旧いブラウザを対象としたものです。 例えば、旧いブラウザを利用しているユーザーに向けて、ビデオコンテンツへのアクセス方法を通知できます。

メディア要素に共通の属性

src属性、crossorigin属性、preload属性、autoplay属性、loop属性、muted属性、controls属性は、 メディア要素（video要素とaudio要素）に共通の属性です。

poster属性

poster属性は、ビデオの再生前に表示されるポスターフレームを指定します。 poster属性の値には、ビデオデータが利用できないときにユーザーエージェントが表示できる画像ファイルのURLを指定します。 poster属性が存在する場合は、空ではない有効なURLを指定する必要があります。

poster属性によって与えられる画像（ポスターフレーム）は、 ユーザーにビデオがどのようなものかを示すことを目的としています。 通常はビデオ冒頭部分の非空白フレームのように、 そのビデオの代表的なフレームを画像にして使用されることを想定しています。

playsinline属性

playsinline属性はブール値の属性で、 ユーザーエージェントが要素の再生領域内にビデオコンテンツを表示することを奨励します。 playsinline属性が存在する場合、ユーザーエージェントに対して 「ビデオコンテンツが全画面表示やサイズ変更可能な独立したウィンドウで表示されるのではなく、 video要素の再生領域内に制限されてインラインで表示されるべき」というヒントを与えます。

要するに、playsinline属性を指定すると、ブラウザに対して 「インラインで再生していください。全画面表示にしないでください。」 と指示できるということです。

playsinline属性を指定しない場合、必ずビデオが全画面表示されるというわけではありません。 実際のところ、ほとんどのユーザーエージェントはデフォルトでビデオをインラインで再生します。 そのようなユーザーエージェントでは、playsinline属性を指定しても特に変化はありません。

■属性

■使用例

以下のサンプルは、video要素の基本的な使用例です。

<p>
 <video src="./sample/sample.mp4" controls>
  <a href="./sample/sample.mp4">動画ファイルをダウンロード</a>
 </video>
</p>

■使用例

以下のサンプルは、ビデオが正しく再生できなかった場合にそれを検出する方法を示しています。

<script>
 function failed(e) {
   // ビデオが再生されない理由をアラート表示します。
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('ビデオの再生を中止しました。');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('ネットワークエラーなどの理由で、ビデオのダウンロードが中止されました。');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('ブラウザでサポートされていないなどの理由で、ビデオの再生が中止されました。');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('サーバー上に存在しないなどの理由で、ビデオを読み込めませんでした。');
       break;
     default:
       alert('不明なエラーが発生しました。');
       break;
   }
 }
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>

上記サンプルを別ページで開きます。

上記サンプル中のvideo要素のsrc属性で指定している「tgif.vid」はサーバー上に存在しませんので、 「サーバー上に存在しないなどの理由で、ビデオを読み込めませんでした。」というアラート表示が出れば正しい挙動ということになります。

video要素とaudio要素の違い

メディア要素には、video要素とaudio要素があります。

video要素とaudio要素の違いは、単純にビジュアルコンテンツの有無だけです。 video要素にはビデオやキャプションといったビジュアルコンテンツの再生領域があるのに対し、 audio要素にはありません。

video要素とaudio要素は、どちらもビデオとオーディオの両方に使用できます。

■関連項目

Sponsors