[68] 動画や音声に字幕やキャプションを表示しよう track要素

<track>要素は「メディア要素（<video>・<audio>要素）」の子要素です。
<video>要素・<audio>要素と組み合わせて、字幕などのテキストトラック（外部ファイル）を組み込みます。これもHTML5からの新要素です。

<track>要素は空要素。終了タグはありません。

使用する要素	<track>（空要素。終了タグは不可）

<track>の属性 （一覧はこちら）	src	：組み込むテキストトラックファイルのURL
	kind	：テキストトラックの種類をキーワードで指定
	srclang	：テキストトラックデータの言語
	label	：トラックの名前
	default	：複数指定したトラックのうち、優先トラックにする
	グローバル属性

<video>要素と組み合わせて、動画に字幕をつけよう

<track>要素の src属性で、字幕用のテキストトラックファイル（今回のサンプルは WebVTT形式）を呼び出します。

<track>要素は、HTML5.1 からクロスオリジンが使えるようになりました。
src属性で読み込むテキストトラックファイルは、別のドメインのファイルでもOK だそうです。

kind属性はテキストトラックの種類、srclang属性はテキストトラックの言語コードを指定します。

<video>要素内に <source>要素があれば、その後に <track>を指定します。
代替え用のコンテンツが有る場合は、必ずその前に <track>要素を書きます。

<track>要素は複数入れることも可能です。
その場合は label属性でトラックの名前をつけておくと、ユーザーが選択できるようになります。（日本語と英語の字幕がある場合など）

サンプルです。
2つの<track>要素を使っています。

↓これは画像です。クリックで別ウィンドウでサンプルが開きます。

コントローラに表示切り替えボタンが表示され、字幕のオフや、2つの字幕（サンプルでは「日本語」「English」）を切り替えられます。（↑画像は Firefox（on Mac））

HTMLはこちら ↓

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
  <source src="video/uchiage.webmsd.webm" type="video/webm">
  <source src="video/uchiage.mp4" type="video/mp4">
  <track src="track.vtt" kind="subtitles" srclang="ja" label="日本語" default>
  <track src="tracken.vtt" kind="subtitles" srclang="en" label="English">
  <p>このブラウザは動画再生に対応していません</p>
</video>

「track.vtt」ファイル（日本語）はこちら ↓

WEBVTT

00:00.000 --> 00:02.000
打ち上げが始まりました！

00:09.500 --> 00:15.500 line:10%
百花繚乱

00:16.500 --> 00:21.000 line:80% position:80%
そろそろ終了です

「tracken.vtt」ファイル（English）はこちら ↓

WEBVTT

00:00.000 --> 00:02.000
The launch of fireworks began！

00:09.500 --> 00:15.500 line:10%
How beautiful.

00:16.500 --> 00:21.000 line:80% position:80%
It will finish soon.

「WebVTTファイル」でテキストトラックを作ろう

<track>要素で使う テキストトラックファイルには、以下の２つの形式があります。
・TTML（Timed Text Markup Language / 拡張子「.ttml」 XML）
・WebVTT（Web Video Text Tracks / 拡張子「.vtt」 プレーンテキスト）

TTMLは XMLで ちょっと複雑ですが、WebVTT はプレーンテキストで書くだけ。
サンプルは「WebVTT」で書いてみました。

下記のようにタイムコードと表示テキストを書いて、拡張子を「.vtt」で保存すればOK。文字エンコードは UTF-8 。

WEBVTT

00:00.000 --> 00:02.000
打ち上げが始まりました！

00:09.500 --> 00:13.500 line:10%
<b>百花繚乱</b>

00:18.000 --> 00:21.000 line:80% position:80%
そろそろ終了です

冒頭に WEBVTT と書いて WebVTT形式であることを宣言します。
そのあと 空白行 を入れます。空白行は指定の区切りを表します。
時間形式は hh:mm:ss.sss で表します。始まりの時間と終わりの時間を「 --> 」でつなぎます。
その時間帯に表示したいテキストをすぐ下に（空白行無しで）書きます。
テキストだけでなく<b>などの指定も可能。（ブラウザによって反映しない場合あり。ChromeはOK）

キュー（1つの字幕表示）とキューの間は、空白行で空けて区切ります。
（コレ重要。空白行が無しで次のキューの時間指定をすると、テキストとして表示されちゃいます）

字幕のデフォルトの表示位置は画面下部分の中央ですが、
時間指定の後に、line や position、align などで、表示位置を変更することもできます。
● line は上下の位置を指定します。line:10% で画面上から10％の位置になります。
● position は左右の位置
● align は文字の頭揃えや尻揃え を指定します。
詳細はこちら：WebVTT | MDN

複数の<track>を指定するときの注意点

複数指定するとき、kind属性と srclang属性の値が 両方とも同じものは一緒に使えません。その場合、 label属性で違う名前を付けてやれば一緒に使えます。

また、どれか1つに default属性を指定して、デフォルトで有効になるようにしなければなりません。

下の例は、<track>要素を2つ使っていて、両方とも kind属性は caption、srclang属性は ja（日本語）ですが、label属性が違っているので一緒に使えます。

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
  <source src="uchiage.webmsd.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
  <track src="track1.vtt" kind="captions" srclang="ja" label="caption-1" default>
  <track src="track2.vtt" kind="captions" srclang="ja" label="caption-2">
</video>

<audio>要素にも使えるはず…ですが

W3Cの仕様書では、<audio>要素でも <track>要素が使えることになっているのですが、今のところ実装しているブラウザは無いそうです。
各ブラウザは <audio>内の <track>要素の内容を無視するらしいです。（2019年1月記）

1つ、ちょっと邪道な方法を見つけました。
<audio>ではなく <video>要素に音声ファイルを仕込んで <track>要素で字幕をつける方法です。<video>要素でも音声は再生できるので。
参考：WebVTT and Audio - Ian Devlin :: Web Developer

ブラウザによって、ちゃんとキューを表示するものもあれば（Firefox と Safari はなぜかOK）、最初のキューだけ表示するのもあれば、まったく反応しないものもありました。

サンプルはこちらです↓（先程のサンプルの下の方にあります）
クリックで別ウィンドウで開きます
HTMLソースコードもこちらをご覧ください。

<track>の属性一覧

src="URL"

組み込むテキストトラックファイルのURL。必須。

<track src="track.vtt" kind="subtitles" srclang="ja" label="日本語字幕">

kind="キーワード"

テキストトラックの種類を以下のキーワードで指定する。

• subtitles：翻訳字幕。デフォルト。（画面も音もある環境向け）
• captions：字幕プラス効果音や状況説明などをテキスト表示。（画面はあるけど音の無い環境向け）
• descriptions：動画の視覚的な構成の説明。（画面の無い環境向け）
• chapters：チャプター（章）タイトル。動画の頭出しができるとか。
• metadata：スクリプトから利用される情報。ユーザには非表示。

<track src="track.vtt" kind="subtitles" srclang="ja" label="日本語字幕">

srclang="言語コード"

テキストトラックの言語コードを指定。
日本語は「ja」英語は「en」フランス語は「fr」など。

<track src="track.vtt" kind="subtitles" srclang="ja" label="日本語字幕">

label="任意の名前"

<track>を複数指定する時に、各トラックを区別するためのラベル（名前）。
各トラックをリストで表示する時に使う。空文字不可。
kindとsrclang属性が同じ<track>なら、label属性は違う値にする必要あり。

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

default（または「default=""」「default="default"」 ）

<track>を複数指定する時に、デフォルトで有効になるトラックを指定する。

<track src="track1.vtt" kind="subtitles" srclang="ja" label="日本語字幕ヤマトンチュ" default>
<track src="track2.vtt" kind="subtitles" srclang="ja" label="日本語字幕ウチナーンチュ">

このほかグローバル属性も使います

id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回から <canvas>要素を使ってみます。
<canvas>要素はスクリプトで描くグラフィックスを表示する領域を作る要素です。
JavaScript メソッドがいろいろ用意されて、かなりオモシロイことができます。
描画の基礎からやって行こうと思います。