この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:guest
更新日時:2026-06-11 07:29:05

タイトル: track要素
SEOタイトル: HTML track要素 完全ガイド（字幕 / キャプション / WebVTT / kind属性 / 多言語対応）

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

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>

主な属性

属性意味例
srcWebVTT ファイルの URL（必須）movie.ja.vtt
kindトラックの種類（既定 subtitles）captions
srclangテキストの言語タグ（ja / en 等）ja
labelUI で表示されるトラック名日本語
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 標準に組み込まれています。

項目WebVTTSRT
最初の行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

関連