videoの概要
videoは映像再生に対応するメディアプレイヤーを埋め込みます。ブラウザによってコーデックやフォーマットが異なるためsourceを用いて複数のフォーマットを指定することができます。
注意点
video要素は音声ファイルにも使用できますが、その場合はaudio要素を使用します。
videoに使える属性
属性とは<video> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。
よく使うグローバル属性
| id | 概要 | 要素に対してID固有の識別名を付けることができます。 |
|---|---|---|
| 属性の値 | 英字から始まる英数字 | |
| class | 概要 | 要素に対して分類名を付けることができます。 |
| 属性の値 | 英字から始まる英数字 | |
| style | 概要 | 要素に対して直接スタイルを指定することができます。 |
| 属性の値 | スタイルシートのコード |
videoタグに使えるその他属性
| autoplay | 概要 | データの読み込みが完了し再生可能な状態になると自動的に再生を開始します。ただし、ユーザーにとって不快となるよう場合は使用は避けるべきです。 |
|---|---|---|
| 属性の値 | autoplay | |
| controls | 概要 | 再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。 |
| 属性の値 | controls | |
| loop | 概要 | ループ再生を指定できます。 |
| 属性の値 | loop | |
| preload | 概要 | ページ表示時にメディアリソースを事前ロードするか指定します。指定に従うかどうかはブラウザ側が決めます。autoplayが指定された場合は無視されます。 |
| 属性の値 | auto（事前ロードする）、none（事前ロードしない）、metadata（メタデータのみを事前ロードする） | |
| playsinline | 概要 | 映像を再生エリア内で再生するかを指定します。 |
| 属性の値 | playsinline | |
| src | 概要 | 埋め込む動画へのURLを指定します。省略可能です。埋め込む映像の指定にはvideo要素のブロック内でsourceを使用することもできます |
| 属性の値 | URL | |
| height | 概要 | 動画の表示領域の高さを指定します。 |
| 属性の値 | ピクセル値（絶対値）で指定します。パーセント値は指定できません。 | |
| width | 概要 | 動画の表示領域の横幅を指定します。 |
| 属性の値 | ピクセル値（絶対値）で指定します。パーセント値は指定できません。 | |
| poster | 概要 | ブラウザが表示可能な形式のビデオが無い場合に表示する画像ファイルを指定します。 |
| 属性の値 | URL | |
| muted | 概要 | 動画音声の初期状態が消音になります。 |
| 属性の値 | muted | |
| crossorigin | 概要 | CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。 |
| 属性の値 | anonymous（認証情報を使用しない）、use-credintials（認証情報を使用する） |
スポンサードサーチ
videoの使い方
ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | あり |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |