HTML / Element

track要素の使い方

動画の再生時間に合わせて字幕を表示したいときは、trackで字幕ファイルを結び付けます。

まず結論

trackは、audioやvideoに字幕などの時間付きテキストを追加する要素です。何を伝える字幕なのかをkindで選び、字幕ファイルのURLをsrcに指定します。

会話を別の言語で読めるようにする字幕と、会話や大切な音も伝えるキャプションは用途が異なります。動画の音や映像の内容をすべて伝えるには、字幕以外の説明やテキスト版が必要な場合もあります。

動画にキャプションを付ける

<video controls width="640" height="360">
  <source src="/media/lesson.webm" type="video/webm">
  <source src="/media/lesson.mp4" type="video/mp4">
  <track kind="captions" src="/media/lesson.ja.vtt"
         srclang="ja" label="日本語のキャプション" default>
  このブラウザーでは動画を再生できません。
</video>

動画ファイルと字幕ファイルは、例に書いた場所に実際に用意してください。字幕ファイルが読み込めない場合に備えて、動画の近くに文字起こしへのリンクを置く方法もあります。

trackはvideoの子要素です。複数の形式をsourceで用意する場合は、その後にtrackを書きます。trackの中に字幕本文を書くのではなく、本文は別ファイルに保存します。

字幕ファイルを書く

字幕ファイルにはWebVTTなどの形式を使えます。WebVTTでは、WEBVTTから始め、字幕の開始時刻と終了時刻、表示する文章をcueとして記録します。

WEBVTT

00:00:00.000 --> 00:00:02.000
ドアが閉まる音。

00:00:02.000 --> 00:00:04.000
話者: こんにちは。

この例をUTF-8のテキストファイルに保存し、例ではlesson.ja.vttという名前にします。時間は動画の再生開始からの位置です。キャプションには、内容を理解するのに必要な効果音なども含めます。

属性の役割

属性	何を指定するか
`src`	字幕ファイルのURLです。指定が必要です。
`kind`	字幕の用途です。この記事の例では、会話と大切な音を含める`captions`を使っています。
`srclang`	字幕ファイルの言語です。たとえば日本語なら`ja`です。`kind="subtitles"`を使うときは指定が必要です。
`label`	ブラウザーが字幕の選択一覧を表示するときに使う名前です。利用者が見て分かる名前にします。
`default`	利用者の設定に合う他の字幕がないとき、最初に使う候補を示します。必ず表示する命令ではありません。

字幕の候補を複数置く場合、同じ動画のcaptionsまたはsubtitlesの中でdefaultを付けるものは1つまでです。利用者の言語設定やブラウザーによって選ばれる字幕は変わることがあります。

字幕の種類を選ぶ

captions: 会話に加えて、意味を理解するために必要な音も伝えます。
subtitles: 音声は聞こえるものの言葉が分からない人向けに、会話を文字起こしまたは翻訳します。srclangも指定します。
descriptions: 映像にしかない情報をテキストで説明し、音声にする用途があります。
chapters: 動画の章を表す時間付き情報です。
metadata: JavaScriptなどのプログラムで使う時間付き情報です。

kindを省略すると、仕様上はsubtitlesになります。字幕ファイルを動画に焼き込んだだけでは、利用者が表示を切り替えられない場合があります。

音声の文字起こしは別に用意する

trackはaudioにも関連付けられますが、音声だけを再生する部品には字幕を映像に重ねる場所がありません。録音の内容を読めるようにするには、音声の近くに文字起こしへのリンクも置きましょう。

字幕を付けたことだけで、アクセシビリティの条件をすべて満たしたことにはなりません。必要な字幕の内容や、映像の説明、音声だけの録音に必要なテキスト版は、メディアの内容に応じて確認します。

よくある間違い

captionsを会話だけの翻訳字幕として使う。
track要素の中に字幕本文を書けば表示されると思う。
defaultを付ければ、利用者の設定に関係なく必ず字幕が表示されると思う。
音声だけの録音にtrackを付ければ、読める文字起こしも用意できたと考える。

Atlasで詳しく確認する

content model、各属性の条件、WebVTT cue、WCAGの適用範囲、実施済みの部分観測と残る未確認範囲は、Yugien Atlasのtrack要素ページにまとめています。動画全体の再生方法はvideo要素、音声と文字起こしはaudio要素も参照してください。