<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属性を指定しても特に変化はありません。
■属性
- src属性
- リソースのアドレスを指定します。
- crossorigin属性
- 要素がクロスオリジンリクエストを処理する方法を指定します。
- poster属性
- ビデオの再生前に表示されるポスターフレームを指定します。
- preload属性
- メディアリソースに必要なバッファリング量のヒントをユーザーエージェントに示します。
preload属性の値に指定できるキーワードは以下の通りです。- none …… バッファリングが開始された場合に、どの程度積極的にメディアリソースをダウンロードするかに関するヒントをユーザーエージェントに提供しません。
（サーバー負荷の軽減を優先したい場合、ユーザーがメディアリソースを必要としない可能性が高い場合など） - metadata …… 一貫した再生を維持しながら可能な限り遅い速度でメディアデータを取得するようにダウンロードを調整することをユーザーエージェントに示します。
（サーバー負荷の軽減と最適なユーザーエクスペリエンスの妥協点） - auto …… メディアリソース全体をダウンロードすることも含めて、サーバーにリスクを与えることなくユーザーのニーズを最優先することをユーザーエージェントに示します。
（ユーザーエクスペリエンスを優先したい場合など）
- none …… バッファリングが開始された場合に、どの程度積極的にメディアリソースをダウンロードするかに関するヒントをユーザーエージェントに提供しません。
- autoplay属性
- ページ読み込み時にメディアリソースを自動再生してもよいというヒントをユーザーエージェントに示します。
autoplay属性とpreload属性を同時に指定すると、autoplay属性の指定が優先されます。 - playsinline属性
- ブール値の属性で、ユーザーエージェントが要素の再生領域内にビデオコンテンツを表示することを奨励します。
- loop属性
- メディアリソースをループするかどうかを指定します。
- muted属性
- デフォルトでメディアリソースをミュートするかどうかを指定します。
- controls属性
- ユーザーエージェントのコントロールを表示します。
- width属性
- 水平寸法を指定します。
- height属性
- 縦寸法を指定します。
■使用例
以下のサンプルは、video要素の基本的な使用例です。
HTMLソース
<p>
<video src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/videos/sample.mp4" controls>
<a href="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/videos/sample.mp4">動画ファイルをダウンロード</a>
</video>
</p>ブラウザ上の表示
■使用例
以下のサンプルは、ビデオが正しく再生できなかった場合にそれを検出する方法を示しています。
HTMLソース
<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要素は、どちらもビデオとオーディオの両方に使用できます。