trackの概要
trackはaudio要素やvideo要素に対して字幕や時間指定されたテキストトラック（字幕など）を指定できます。
trackに使える属性
属性とは<track> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。
よく使うグローバル属性
| id | 概要 | 要素に対してID固有の識別名を付けることができます。 |
|---|---|---|
| 属性の値 | 英字から始まる英数字 | |
| class | 概要 | 要素に対して分類名を付けることができます。 |
| 属性の値 | 英字から始まる英数字 | |
| style | 概要 | 要素に対して直接スタイルを指定することができます。 |
| 属性の値 | スタイルシートのコード |
trackで使うその他属性
| src | 概要 | 埋め込むコンテキストのパスを指定する属性です。 |
|---|---|---|
| 属性の値 | 埋め込むページのURL | |
| kind | 概要 | トラック情報の種別を指定する属性です。 |
| 属性の値 | subtitles、captions、descriptions、chapters、metadatas | |
| srclang | 概要 | 情報の言語を指定できます。 |
| 属性の値 | ja、enなど | |
| label | 概要 | トラック指定の際にユーザに見せるテキストトラックのタイトルを指定できます。 |
| 属性の値 | 文字列 | |
| default | 概要 | 複数のトラックが存在する時などのデフォルトのTトラックを指定できます。 |
| 属性の値 | default |
スポンサードサーチ
<track>の基本的な書き方
<video controls width="320">
<source src="/wp-content/video.mp4" type="video/mp4">
<track kind="description" srclang="ja" src="/wp-content/track.vtt">
ご使用のブラウザではこの動画を再生できません。
</video>
ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | あり |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |