<video>〜</video>
video（ビデオ）要素は文書内に動画ファイルを埋め込みます。プラグインを必要とせず、ブラウザの基本機能のみで音声の再生を可能にします。
| video要素 | 説明 |
|---|---|
| カテゴリー | ・インタラクティブコンテンツ ・エンベッディッドコンテンツ ・パルバブルコンテンツ ・フレージングコンテンツ ・フローコンテンツ ＊インタラクティブコンテンツとなるのは controls 属性をもつ場合 |
| コンテンツモデル | ・src属性をもつ場合は、0個以上のtrack要素に続きトランスペアレントコンテンツ ・src属性をもたない場合は、0個以上のsource要素、0個以上の track 要素に続きトランスペアレントコンテンツ ＊ただし、上記どちらの場合でも子孫に他の audio 要素や、video 要素を含むことなできない。 |
| 使用できる場所 | エンベッディッドコンテンツが期待される場所 |
video要素に指定できる属性
| 属性名 | 値 | 説明 |
|---|---|---|
| グローバル | すべての要素で使用できる属性 | |
| src | URI | 埋め込む動画ファイルのURiを指定する。 |
| crossorigin | ・anonymous：Cookie やクライアントサイドの SSL 証明書、HTTP 認証などのユーザ認証情報は不要。 ・use-credentials：ユーザ認証情報を求めます。 | crossorigin 属性は CORS （Cross-Origin Resource Sharing / クロスドメイン通信） 設定属性です。 別オリジンから読み込んだ画像などのリソースを文書内で利用する際のルールを指定します。 |
| poster | 代替画像の URI を指定する | poster 属性は video 要素において動画が表示できない場合や、動画を再生する準備が整うまでの間、表示させる画像の URI を指定します。 |
| preload | ＊列挙属性 ・none：音声や動画が必ず再生されるとは限らない、または不必要トラフィックを避けたいといった意思をブラウザに伝えます。不要な読み込みを避けられるかもしれません。 ・metadata：そのリソースのメタデータ（再生時間などの情報）だけは先に取得しておくことをブラウザに勧めます。 ・auto：サーバのトラフィックなどは気にせず、閲覧者のニーズを優先してリソース全体をダウンロード開始してよいということをブラウザに伝えます。属性値が空の場合はこの扱いとなります。 | preload属性はaudio要素、video要素において、再生するファイルを事前に読み込んでおくかを指定する。 この取り扱いは使用するブラウザによるので、確実に指定した通りの挙動となるかはわからない。 なお、autoplay 属性が同時に指定されている場合は、この属性の指定は無視される。 |
| autoplay | ＊論理属性 | autoplay属性は、audio要素や video要素に指定することで読み込んだファイルを自動的に再生します。 ＊ただし、閲覧者の意思と関係なく再生される音声は迷惑なことが多いので、使用には注意が必要となる。 |
| playsinline | ＊論理属性 | playsinline属性は、video要素によって埋め込まれた映像を「インライン」で再生するように指定する。 インライン再生とは、その要素が埋め込まれた場所で再生するという意味になる。 |
| loop | ＊論理属性 | エンドレス再生を行う。 |
| muted | ＊論理属性 | ミュート（再生音が停止）した状態で再生を行う。 |
| controls | ＊論理属性 | controls属性はaudio要素やvideo要素に指定することで音声や動画ファイルの再生をコントロールするインタフェースを表示させる。 この表示は、使用しているブラウザに依存する。 |
| width | 正の整数を指定 | 要素の横幅を指定する。 |
| height | 正の整数を指定 | 要素の高さを指定する。 |
使用例
<video src="./IMG_0920.mp4" controls muted width="500" height="400">
<p><a href="./IMG_0920.mp4">動画ファイルをダウンロード</a></p>
</video>表示