この記事の要点

<track> 要素は <video> / <audio> に字幕・キャプション・チャプターなどのテキストトラックを追加する空要素 src 属性で WebVTT（.vtt）ファイルを指定する kind 属性は subtitles / captions / descriptions / chapters / metadata の 5 種 複数言語の字幕は <track> を複数並べ、srclang + label + default で使い分ける 同一オリジン制約があるため、別ドメイン配信時は CORS 設定 + crossorigin 属性が必要

track 要素とは

<track> 要素は、<video> や <audio> に字幕（subtitles）・キャプション（captions）・音声説明（descriptions）・チャプター（chapters）・メタデータ（metadata）といったテキストトラックを紐付けるための空要素です。

外部の WebVTT（.vtt）ファイルを src で参照し、再生に合わせてブラウザが字幕やチャプター情報を表示してくれます。

基本構文

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">

  <!-- 日本語字幕（既定で表示） -->
  <track kind="subtitles" src="movie.ja.vtt"
         srclang="ja" label="日本語" default>

  <!-- 英語字幕 -->
  <track kind="subtitles" src="movie.en.vtt"
         srclang="en" label="English">

  <!-- 章ごとのジャンプ用 -->
  <track kind="chapters" src="movie.chapters.vtt"
         srclang="ja" label="章">
</video>

主な属性

属性	意味	例
src	WebVTT ファイルの URL（必須）	movie.ja.vtt
kind	トラックの種類（既定 subtitles）	captions
srclang	テキストの言語タグ（ja / en 等）	ja
label	UI で表示されるトラック名	日本語
default	このトラックを既定で有効にする	—

kind 属性の 5 種

kind	用途
subtitles	外国語の翻訳字幕。音声内容を別言語で書き起こす
captions	クローズドキャプション。音声 + 効果音や話者識別も含む。聴覚障害者向け
descriptions	音声説明。視覚情報をテキストで補足（視覚障害者向け、TTS 読み上げ）
chapters	章タイトル。プレイヤーがチャプターメニューを表示
metadata	スクリプトから利用するメタデータ。画面には表示されない

WebVTT ファイルの中身

WebVTT（Web Video Text Tracks）はテキストファイルで、最初の行に WEBVTT と書き、続けて「タイムコード → 表示テキスト」を並べます。

WEBVTT

00:00:00.000 --> 00:00:03.000
こんにちは、世界。

00:00:03.500 --> 00:00:07.000 line:90%
ようこそ、WebVTT の世界へ。

00:00:08.000 --> 00:00:12.000
<v 山田>こちらは話者の名前付きの字幕です。

時刻は HH:MM:SS.mmm 形式。位置や色のスタイル指定（cue 設定）、話者識別の <v ...> タグなども書けます。

多言語切り替え

複数の <track> を並べると、ブラウザの組み込みプレイヤーに言語選択メニューが表示されます（または JS から textTracks API でプログラマブルに切り替え可能）。

const video = document.querySelector('video');
const tracks = video.textTracks;

for (const t of tracks) {
  // 英語字幕だけ ON、それ以外は OFF
  t.mode = (t.language === 'en') ? 'showing' : 'hidden';
}

CORS と同一オリジン制約

セキュリティ上、WebVTT ファイルはデフォルトで同一オリジンからしか読み込めません。CDN や別ドメインで配信する場合は、サーバ側で CORS ヘッダ（Access-Control-Allow-Origin）を返したうえで、<video> 側に crossorigin="anonymous" を付ける必要があります。

<video controls crossorigin="anonymous">
  <source src="https://cdn.example.com/movie.mp4" type="video/mp4">
  <track kind="subtitles"
         src="https://cdn.example.com/movie.ja.vtt"
         srclang="ja" label="日本語" default>
</video>

アクセシビリティ観点

• 聴覚障害者には captions を提供（効果音や話者識別を含む）
• 視覚障害者には descriptions を提供（場面説明）
• 外国語コンテンツには subtitles（翻訳）
• 長尺コンテンツには chapters を付けてシーク性を高める

よくあるハマりどころ

• file:// で確認すると字幕が出ない — ローカルファイルは CORS で弾かれることが多い。簡易 HTTP サーバ経由で確認する
• VTT の文字コードが Shift_JIS — WebVTT はUTF-8 必須。BOM 付きでもよいが Shift_JIS は不可
• Content-Type が text/plain — サーバ側で text/vtt を返すよう設定
• default を複数指定 — 同じ kind で default は 1 つだけ
• タイムコードのミリ秒区切りがコロン — 00:00:01,000 は SRT 形式。WebVTT はピリオド 00:00:01.000

SRT との違い

字幕ファイルにはもう 1 つ広く使われる SRT（SubRip）形式があります。WebVTT は SRT を進化させたもので、HTML5 標準に組み込まれています。

項目	WebVTT	SRT
最初の行	WEBVTT 必須	なし
ミリ秒区切り	ピリオド .	カンマ ,
HTML5 ブラウザサポート	標準	非対応（変換が必要）
cue 設定（位置・色）	○	×
話者識別タグ	<v ...> あり	なし
拡張子	.vtt	.srt

既存の SRT 字幕がある場合は、先頭に WEBVTT を加えてミリ秒区切りを , → . に置換するだけで多くは WebVTT として動きます。

サーバ側の Content-Type 設定

Web サーバが .vtt ファイルに対して正しい MIME タイプを返さないと、ブラウザが字幕として認識しません。Nginx / Apache では次のように設定します。

# Nginx
types {
    text/vtt vtt;
}

# Apache (.htaccess)
AddType text/vtt .vtt

関連

• video要素 — 動画埋め込み
• audio要素 — 音声埋め込み
• source要素 — メディアソースの指定
• HTML — カテゴリトップ