HTML5タグ虎の巻

trackタグ

HTML5

trackは、動画やオーディオにトラック情報を指定するタグです。

解説

trackタグは、動画(videoタグ)やオーディオ(audioタグ)に字幕などのトラック情報(.vttファイル)を指定します。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
なし
コンテキスト
(親カテゴリ)
audioタグvideoタグ
コンテンツ・モデル
(子カテゴリ)
なし

属性

trackタグには以下の属性が指定できます。

【属性】
属性説明
kindトラック情報の種類を指定する
(例)kind="captions"
※以下の値を指定できます。
 subtitles:字幕(翻訳版)※デフォルト値
 captions:字幕(音声から)
 descriptions:動画の説明
 chapters:動画の操作方法
 metadata:スクリプトが使用する情報(システムが使用)
srcトラックファイルを指定する
(例)src="test.vtt
srclang言語を指定する
(例)srclang="ja"
※指定できる値の一例です。
 ja:日本語
 en:英語
 es:スペイン語
 zh:中国語
labelトラック情報のタイトルを指定する
(例)label="タイトル"
defaultデフォルトのトラックを指定する
(例)default ※値はありません。
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

videoタグにtrackタグを指定した例

<video src="sample.mp4">
  <track kind="subtitles" src="subtitling.vtt" srclang="ja">
</video>

(subtitling.vtt)

WEBVTT 1 0:00:00.000 --> 0:00:05.000 字幕1 2 0:00:05.000 --> 0:00:10.000 字幕2 3 0:00:10.000 --> 0:00:20.000 字幕3

備考

  • kind属性に"subtitles"を指定した場合は、srclang属性の指定が必要です。

関連項目

  • video:動画を埋め込む
  • audio:オーディオファイルを埋め込む