<track>:音声や動画コンテンツにテキストトラックを提供する要素・HTMLタグの解説

取り扱い 標準仕様
カテゴリー なし
親にできる要素 <audio><video>
子にできる要素 なし
対応ブラウザ caniuseで確認

<track>タグの解説

<track>は、音声(<audio>)や動画(<video>)コンテンツにテキストトラックを提供します。このタグを用いることで、メディアの埋め込み要素にキュー、字幕、キャプション、メタデータ等を簡単に追加することができます。

表示するテキストトラックは、src属性を使ってWebVTT(.vtt)形式で保存された外部ファイルを指定します。キューデータや字幕などの情報をメディアファイルと切り離した状態で管理することで、コンテンツに柔軟性と拡張性を持たせることができます。

<track>タグの特徴

  • この要素は、<audio>および<video>の中に設置可能です。それ以外では機能しません。
  • レイアウトには影響を与えません。メディアソースに対してテキストデータを与えます。
  • この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。

<track>要素に指定できる属性

src
テキストトラック(.vtt)を読み込む有効なURLを指定します。親要素の<audio>または<video>crossorigin属性が指定されていない限り、同一オリジンを持たなければなりません。
kind
テキストトラックの種類をキーワードで指定します。初期値は"subtitles"です。
  • subtitles:視聴者が理解できない音声の字幕を表します。
  • captions:書写や音声の翻訳を表します。音声のキューやソースを表す場合もあります。
  • descriptions:コンテンツの説明文を表します。
  • chapters:ユーザーがメディアを操作する場合の指標となるチャプターを表します。
  • metadata:スクリプトが使用するメタデータを表します。
srclang
テキスデータの言語を指定します。IETF言語タグで定義された形式を受け入れます。
label
テキストトラックの名前を指定します。ブラウザが利用可能なテキストトラックを一覧表示する際に使用されます。
default
複数のテキストトラックが存在する場合に、優先的に使用するものを指定します。格メディア要素に一つだけ指定でき、ユーザー自身が別のトラックを指定している場合は無効になります。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<track>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。テキストトラックは、メディア埋め込み要素である<audio>または<video>の子要素として配置します。


<video src="file" controls>
	<track src="file.vtt">
</video>

テキストトラックの使用用途を明示するには、適切な属性を追加する必要があります。


<track src="file.vtt" kind="chapters" srclang="en" label="Chapter1">

それでは、一つの動画コンテンツに複数のテキストトラックを配置する例を見てみましょう。以下の内容は、英語音声の動画に日本語字幕の追加を想定したものです。参照先のWebVTT(Web Video Text Tracks)形式のファイル(.vtt)の記述例も掲載します。


<video controls width="640" height="480">
	<source src="vtr.webm" type="video/webm">
	<source src="vtr.mp4" type="video/mp4">
	<track src="descriptions.vtt" kind="descriptions" srclang="en">
	<track src="vtr_en.vtt" kind="captions" srclang="en" label="English captions" default>
	<track src="vtr_ja.vtt" kind="captions" srclang="ja" label="Japanese captions">
	<p>お使いのブラウザではこの動画を再生できません。</p>
</video>
// WebVTTの記述例
1
00:00:10.000 --> 00:00:13.000
- 1のタイミングで表示するキャプション内容

2
00:00:13.100 --> 00:00:18.800
- 2のタイミングで表示するキャプション内容

3
00:00:20.000 --> 00:00:25.000
- 3のタイミングで表示するキャプション内容

<track>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像ファイルを読み込む
<picture> 画像に対して複数のリソースを提供可能なコンテナを配置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで描かれたグラフィックやアニメーションを表示する
<audio> ページに音声コンテンツを埋め込む
<video> ページに動画コンテンツを埋め込む
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 音声や動画コンテンツにテキストトラックを提供する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する