track 要素テキストトラックを埋め込む
track 要素は、動画ファイルや音声ファイルに対して、それと同期する外部のテキストトラックを埋め込みます。
track 要素の仕様
- カテゴリ
-
- なし
- コンテンツモデル
- この要素を使用できる文脈
audio、video 要素の子要素として。ただし、あらゆるフロー・コンテンツより前。
- この要素で使用できる属性
詳細説明
track 要素に指定できる属性は下記の通りです。
| 属性 | 概要 |
|---|---|
| kind 属性 | テキストトラックの種類を指定します。 |
| src 属性 | 外部テキストトラックの URI を指定します。 |
| srclang 属性 | テキストトラックの言語を指定します。track 要素に kind 属性が指定され、その値が subtitles の場合、この属性による言語の指定は必須です。 |
| label 属性 | テキストトラックにラベルを与えます。閲覧者はこのラベルによってテキストトラックを選択したりできます。この属性を指定する場合、属性値に空の値は認められません。 |
| default 属性 | デフォルトのテキストトラックであることを表します。1つの audio、video 要素内に、この属性が指定されたテキストトラックは複数存在してはいけません。 |
kind 属性
kind 属性に指定できる値は、下記の通りです。
| 属性値 | 概要 |
|---|---|
| subtitles | 外国語の字幕を表します。この値が初期値です。audio、video 要素によって提供される動画や音声で使用されている言語と、異なる言語の字幕を提供する場合に使用します。例えば英語音声に対して、日本語字幕を提供する場合などが該当します。 |
| captions | ノイズが多くて音声が聞き取りにくい場合、あるいは閲覧者が聴覚障がい者の方など、音声が利用できない場合に対するテキストトラックを表します。 |
| descriptions | 動画の内容をテキストで説明したものを表します。例えば、画面を見ずに操作するような場合、あるいは視覚障がい者の方など、画面を見ることができない場合に、その内容をテキストで説明します。このテキストトラックは音声合成ソフトで利用されることが想定されます。 |
| chapters | チャプター （場面ごとの） タイトルを表します。例えば再生位置を移動するためのユーザインタフェースとして利用されることなどが想定されます。 |
| metadata | クライアントサイドスクリプトから利用する目的のテキストトラックを表します。このテキストトラックは画面に表示されません。 |
track 要素を使用する際の制限
track 要素は 1つの audio、video 要素内に複数記述できますが、下記の条件、1～3 をすべて満たす track 要素は 1つの audio、video 要素内に複数記述することはできませんので注意しましょう。
- 同じ audio、video 要素を親に持つ 2つ以上の track 要素において、
- kind 属性値が同じ。
- srclang 属性が指定されていない、または同じ言語が指定されている。
- label 属性が指定されていない、または同じラベルが与えられている。
track 要素のサンプルソース
<audio src="/seminar.mp4"> <track kind="captions" src="seminar.ja.vtt" srclang="ja" label="日本語" /> <track kind="subtitles" src="seminar.en.vtt" srclang="en" label="English" /> <p> セミナーの音声が再生。ブラウザで再生できない場合は、下記からダウンロードしてご利用ください。 <a href="/seminar.mp3" type="audio/mp3">ファイルのダウンロードはこちら（MP3 / 1.2MB）</a> </p> </audio>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |