トップページ  > HTML Living Standard  > <track>

★HTML Living Standard リファレンス

<track> …… メディア要素のテキストトラックを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<track>タグは、メディア要素のテキストトラックを表す際に使用します。

track要素はそれ自体では何も表しませんが、 track要素を使用するとメディア要素で使用するテキストトラックデータを指定できます。

HTMLの仕様で定義されているメディア要素には、 video要素audio要素があります。

src属性

track要素のsrc属性は、必須属性です。 src属性の値には、テキストトラックデータのアドレスをURLで指定します。 src属性の値に空文字は指定できません。

kind属性

kind属性は、テキストトラックのタイプをキーワードで指定します。 kind属性の値に指定できるキーワードは、subtitles、captions、descriptions、chapters、metadata です。

label属性

label属性は、トラックのラベル(タイトル)を指定します。 label属性で指定したタイトルは、ユーザーエージェントがユーザーインターフェイスとして表示する際などに使用されます。 label属性の値には、空の文字列は指定できません。

default属性

default属性はブール属性です。 default属性を指定すると、そのトラックが有効であることを示します。 (ユーザーの設定によって他のトラックの方が適切であることが示されていない場合)

track要素の終了タグについて

HTMLの仕様では、track要素には終了タグ</track>はありません。

■属性

kind属性
テキストトラックのタイプを指定します。 kind属性の値に指定できるキーワードは以下の通りです。
  • subtitles …… メディア内容の文字起こしや翻訳などの字幕テキストで、ビデオに重ねて表示されます。 (健聴者や再生環境が整っているユーザーの理解を深めるための字幕)
  • captions …… メディア内容の文字起こしや翻訳などにの字幕テキストで、ビデオに重ねて表示されます。 (聴覚障害者や再生環境が整っていないユーザーを補助するための字幕)
  • descriptions …… メディアリソースに関するテキスト説明で、音声として合成されます。
  • chapters …… スクリプトからの使用を目的としたもので、ユーザーエージェントでは表示されません。
  • metadata …… スクリプトからの使用を目的としたもので、ユーザーエージェントでは表示されません。
src属性
テキストトラックデータのアドレスをURLで指定します。(必須属性)
srclang属性
テキストトラックデータの言語を指定します。 kind属性の値が subtitles の場合には srclang属性が必須です。
label属性
トラックのラベル(タイトル)を指定します。
default属性
default属性はブール属性です。 default属性を指定すると、そのトラックが有効であることを示します。

■使用例

以下のサンプルでは、複数のtrack要素でビデオに複数言語の字幕を付けています。 字幕の言語はsrclang属性によって指定しています。 最後2つのlang属性は字幕自体の言語ではなく、label属性の言語を指定したものです。

HTMLソース

<video src="brave.webm">
 <track src="brave.en.vtt" kind="subtitles" srclang="en" label="English">
 <track src="brave.en.hoh.vtt" kind="captions" srclang="en" label="English for the Hard of Hearing">
 <track src="brave.fr.vtt" kind="subtitles" srclang="fr lang="fr" label="Français">
 <track src="brave.de.vtt" kind="subtitles" srclang="de lang="de" label="Deutsch">
</video>

■関連項目

  • <video> …… ビデオを表す
  • <audio> …… サウンドやオーディオを表す
  • <track> …… メディア要素のテキストトラックを表す
  • <embed> …… 埋め込みリソースを表す
  • <object> …… 外部リソースを表す
  • <picture> …… 画像リソースの選択肢を提供する
  • <source> …… リソースの選択肢をセットする
  • <img> …… 画像を表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ