【HTML】track 要素で動画・音声に字幕（キャプション）を付ける方法｜kind・src・srclang・label を解説

動画や音声にセリフやナレーションのテキストを重ねて表示する「字幕」は、<video> や <audio> の中に <track> 要素を置くだけで実現できます。音を出せない環境での視聴や、耳の不自由な方への配慮、外国語コンテンツの翻訳など、字幕が役立つ場面は数多くあります。この記事では、<track> の基本的な書き方から、字幕データを記述する WebVTT ファイルのフォーマット、kind・src・srclang・label といった属性の意味、複数言語の字幕を切り替える実践例、そしてローカルで表示されないときの原因までを順に解説します。

track 要素とは何か

<track> は、<video> や <audio> の中に置いて、字幕・キャプション・説明などのテキストトラックを追加するための要素です。動画そのものに字幕を焼き込むのではなく、字幕を別ファイル（WebVTT ファイル）として用意し、それを <track> で読み込ませることで、ブラウザが再生時にテキストを重ねて表示してくれます。

字幕を付けるメリットは大きく、まず音声を出せない電車内やオフィスなどでも内容を追えます。聴覚に障害のある方にとっては情報を得る手段そのものになり、アクセシビリティの面で欠かせません。さらに、字幕のテキストは検索エンジンにも読み取られるため、動画コンテンツの内容を伝える助けにもなります。<track> はこうした字幕表示を、JavaScript を使わず HTML の記述だけで実現できるのが特徴です。

基本の書き方（video の中に track を置く）

まずは最小限のコードで全体の形を確認します。<video> の中に <source> で動画ファイルを、<track> で字幕ファイルを指定します。<track> は終了タグを持たない空要素です。

<video controls width="640" height="360">
  <source src="lesson.mp4" type="video/mp4">

  <!-- 日本語の字幕を読み込む -->
  <track
    kind="subtitles"
    src="captions.ja.vtt"
    srclang="ja"
    label="日本語"
    default
  >
</video>

src に字幕ファイル（ここでは captions.ja.vtt）のパスを指定し、srclang でその字幕の言語を、label でメニューに表示される名前を指定しています。default を付けた <track> は、ページを開いた時点で最初から有効になります。あとはブラウザの再生コントロールにある字幕ボタンで表示・非表示を切り替えられます。

肝心の字幕の中身は HTML には書きません。次に説明する WebVTT ファイルの側に記述します。

WebVTT ファイル（.vtt）の書き方

字幕データは WebVTT（Web Video Text Tracks）という形式のテキストファイルに書きます。拡張子は .vtt です。ファイルの1行目には必ず WEBVTT というヘッダーを書き、そのあとに「いつからいつまで、どのテキストを表示するか」を並べていきます。

WEBVTT

00:00:01.000 --> 00:00:04.000
こんにちは。今日は track 要素について学びます。

00:00:05.500 --> 00:00:09.000
まずは字幕ファイルの書き方から
確認していきましょう。

1つ1つの字幕のまとまりを「キュー」と呼びます。各キューは、表示する時間を示すタイムスタンプの行と、実際に表示するテキストの行で構成されます。タイムスタンプは 開始時刻 --> 終了時刻 の形式で、時刻は 時:分:秒.ミリ秒（00:00:01.000）と書きます。時が0でも省略できますが、分・秒は2桁、ミリ秒は3桁で書くのが基本です。矢印 --> の前後には半角スペースが必要です。

キューとキューの間は空行で区切ります。1つのキューのテキストは複数行に分けて書くこともでき、その場合は改行がそのまま字幕の改行として表示されます。ヘッダーの WEBVTT と最初のキューの間にも空行を入れてください。

track の属性を整理する

どんな種類のテキストを、どの言語で、どんな名前で読み込むかは、すべて <track> の属性で決まります。主な属性は次のとおりです。

このうち kind は字幕の役割を決める重要な属性です。指定できる値と用途を整理しておきます。

日常的によく使うのは subtitles と captions の2つです。この違いについてはあとで詳しく説明します。

複数言語の字幕を切り替えられるようにする

<track> は1つの <video> に何個でも置けます。言語ごとに srclang と label を変えた <track> を並べておくと、ブラウザの字幕メニューから視聴者が言語を選んで切り替えられるようになります。

<video controls width="640" height="360">
  <source src="lesson.mp4" type="video/mp4">

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

  <!-- メニューから選べる英語字幕 -->
  <track
    kind="subtitles"
    src="captions.en.vtt"
    srclang="en"
    label="English"
  >
</video>

この例では日本語の <track> に default を付けているので、ページを開くとまず日本語字幕が表示されます。視聴者が字幕メニューを開くと、label に指定した「日本語」「English」が選択肢として並び、そこから英語に切り替えられます。default は複数のトラックのうち1つだけに付ける点に注意してください。どれにも default を付けなければ、初期状態では字幕がオフになります。

subtitles と captions はどう違うのか

kind の値でよく迷うのが subtitles と captions の使い分けです。見た目はどちらも動画の上にテキストが表示されるだけで同じに見えますが、想定している用途が異なります。

subtitles（字幕）は、話されている言葉を文字にしたものです。外国語の動画を母国語に翻訳して見せる場合や、セリフをそのまま書き起こす場合に使います。あくまで「音声は聞こえている」ことが前提で、言葉の内容を補うのが目的です。

一方 captions（キャプション）は、音が聞こえない人でも動画を理解できるようにするためのものです。セリフだけでなく、「（電話が鳴る）」「（拍手）」といった効果音や、誰が話しているかといった音に関する情報まで文字にします。聴覚に障害のある視聴者を主な対象とするなら captions、単に言葉を翻訳・書き起こしするだけなら subtitles、と考えると選びやすくなります。

字幕が表示されないときに確認すること

<track> を書いたのに字幕が出ない、というのはつまずきやすいポイントです。原因はいくつかのパターンに分かれるので、順に確認していきましょう。

ローカルファイル（file://）で開いている

最も多いのが、HTML ファイルをブラウザにドラッグ&ドロップするなどして file:// で直接開いているケースです。<track> で読み込む WebVTT ファイルは、セキュリティ上の同一オリジンポリシー（CORS）の制約を受けます。file:// で開くと動画は再生できても字幕だけが読み込まれず、表示されないことがあります。ローカル開発サーバー（http://localhost など）を立てて http:// 経由で開けば解決します。エディタの拡張機能やちょっとしたサーバーコマンドで簡単に用意できるので、字幕の確認は必ずサーバー越しに行ってください。

WEBVTT ヘッダーやタイムスタンプの書き方が誤っている

WebVTT ファイルの1行目が WEBVTT になっていないと、ブラウザはそのファイルを字幕として認識しません。全角で書いていたり、前後に余計な文字が入っていたりしないか確認してください。また、タイムスタンプの矢印 --> の前後にスペースが無かったり、秒とミリ秒の区切りをコンマにしていたり（正しくはピリオド .）すると、そのキューが無視されます。SRT 形式など他の字幕形式とフォーマットが違う点に注意が必要です。

kind や srclang の指定漏れ

kind を省略すると subtitles として扱われますが、subtitles の場合は srclang が必須です。srclang を書き忘れると、ブラウザによっては字幕として正しく扱われないことがあります。字幕を出すつもりなら kind・src・srclang の3つはセットで指定しておくと確実です。あわせて、src のパスが正しく、実際にその場所に .vtt ファイルが存在するかも見直しましょう。

まとめ

<track> は、<video> や <audio> の中に置いて字幕やキャプションを付けるための要素です。字幕データは WEBVTT ヘッダーから始まる WebVTT ファイル（.vtt）に、00:00:01.000 --> 00:00:04.000 のようなタイムスタンプとテキストのキューを並べて記述します。<track> には読み込むファイルを示す src、種類を示す kind、言語を示す srclang、メニュー表示名の label、既定表示にする default を指定し、言語ごとに複数並べれば視聴者が字幕を切り替えられます。subtitles は言葉の翻訳・書き起こし、captions は音の情報まで含めた聴覚障害者向け、という違いも押さえておきましょう。字幕が出ないときは、まず file:// で開いていないか、WebVTT のフォーマットや srclang の指定漏れがないかを確認してください。

参考ページ

• <track>: 埋め込みテキストトラック要素 – HTML | MDN
• WebVTT API – Web API | MDN
• <video>: 動画埋め込み要素 – HTML | MDN