HTML5のtrack要素はkindとsrclangで字幕の役割と言語を分ける

HTML5のvideo要素へ字幕を付けるときは、外部のtext trackをtrack要素で指定します。kindには字幕の役割、srcには字幕fileのURL、srclangには言語、labelには利用者が選ぶときの名称を入れてください。

音声を聞ける人向けの翻訳はsubtitles、音声を利用できない人向けに会話と必要な効果音を伝えるものはcaptionsです。画面へ文字が出るという見た目だけで、二つを同じにしないことが先です。

track要素はvideoと外部text trackを結び付ける

HTML5 Recommendationのtrack要素に関する定義では、track要素をmedia要素へ明示的な外部text trackを指定する要素としています。track要素だけでは内容を表しません。

次は説明用の仮例です。

<video controls>
  <source src="company-guide.mp4" type="video/mp4">
  <track
    kind="captions"
    src="company-guide-ja.vtt"
    srclang="ja"
    label="日本語"
    default>
</video>

動画fileはsource要素、字幕fileはtrack要素で指定します。track要素のsrc属性は必須で、有効な空でないURLを入れます。上のfile名と内容は仮例であり、実在する動画や字幕ではありません。

track要素はmedia要素の子として置き、本文などのflow contentより前へ記述します。HTMLへ追加しただけで字幕fileの取得と表示が成功したとは判断せず、公開URLで読み込みを確認してください。

subtitlesとcaptionsは音声を使えるかで分ける

kind属性には、text trackの役割を指定します。

日本語音声の動画へ日本語の文字を付ける場合でも、会話だけを書き起こすのか、音を使えない人へ必要な情報まで伝えるのかで役割が変わります。字幕fileを作る前に、対象者と含める情報を決めてください。

kindを省略した場合はsubtitlesとして扱われます。ただし、省略できることと、意図が明確であることは別です。運用者が役割を確認できるよう、kindを明示します。

srclangとlabelは言語codeと表示名を分ける

srclang属性はtext track dataの言語を示します。kind="subtitles"では必須で、BCP 47に合う言語tagを指定します。日本語ならja、英語ならenが候補です。

label属性は、利用者が字幕やcaptionを選ぶ画面で使われる名称です。空の値にはできません。

<track kind="subtitles" src="guide-ja.vtt" srclang="ja" label="日本語">
<track kind="subtitles" src="guide-en.vtt" srclang="en" label="English">

srclang="ja"へlabel="Japanese"と書くこともできます。srclangはtrack dataの言語、labelは利用者へ見せる名称だからです。管理画面の都合で、言語codeと表示名を同じfieldへ押し込まないでください。

同じmedia要素に、同じkind、同じ言語、同じlabelを持つtrackを重複させないようにします。複数の字幕を用意するなら、言語または役割の違いが選択名から分かるようにしてください。

defaultは利用者の設定より強制されない

default属性を付けると、利用者の設定から別のtrackが適切だと判断されない場合に、そのtrackを有効にします。必ずその字幕を表示する命令ではありません。

同じmedia要素では、subtitlesまたはcaptionsのgroupにdefaultを付けるtrackを一つにします。複数言語へ全部defaultを付けても、既定言語を明確にできません。

既定を日本語captionにするか、字幕を初期表示しないかは、動画の言語と想定利用者から決めます。制作会社が都合のよい一件へdefaultを付けるのではなく、サイト運営者が公開方針として指定してください。

字幕fileとHTMLを一緒に納品する

字幕制作とHTML制作を別の会社へ依頼すると、file名、言語、役割、更新版がずれやすくなります。納品では、次の対応を一組で受け取ります。

1. 動画の識別名
2. 字幕fileのURL
3. kindの値
4. srclangの値
5. 利用者へ見せるlabel
6. defaultにする理由

動画を差し替えたときは、字幕の時間と内容も同じ版か確認します。HTMLだけを残して字幕fileを削除すれば、track要素はあっても読み込めません。字幕fileだけを更新し、HTMLのsrcが古い版を指す場合も同じです。

仕様に合うmarkupと、対象browserで字幕を選択して読めることは別の確認です。公開前に、使うbrowserと端末で、trackの一覧、label、表示時刻、文字化け、file取得errorを確認してください。

最初の一手は、動画一件について、音声を理解できない人向けのsubtitlesか、音声を使えない人向けのcaptionsかを決めることです。役割が決まったら、字幕fileのURL、言語code、選択名を一行にしてHTMLへ反映します。