“track”要素:テキストトラックを埋め込む｜HTML－havin' a coffee break

＃

要素について

カテゴリー	なし
利用場所	“audio”要素もしくは“video”要素の子要素として
内容	空
タグの省略	終了タグはありません

“track”要素は親要素となる“audio”要素と“video”要素と同期するテキストトラックを埋め込む要素です。

メディアファイルとは別のファイルで記述された翻訳版の字幕や難聴用の字幕などを埋め込むことができます。テキストトラックのファイル形式はWebVTT(Web Video Text Tracks)が一般的です。

“track”要素は“audio”要素の中に配置できますが、多くのブラウザには“audio”要素で埋め込まれた音声の字幕を表示する機能はありません。

サンプルコード

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
src=""	埋め込むテキストトラックの指定	URL	埋め込むテキストトラックのURL
任意属性
グローバル属性
kind=""	テキストトラックの種類を指定	subtitles	表示領域に重ねて表示される動画や音声で使用されている言語とは異なる言語の字幕
		captions	表示領域に重ねて表示される動画や音声で使用されている言語と同じ言語の字幕
		description	合成音声によって読み上げられる動画の内容のテキストでの説明
		chapters	再生位置を移動するためのチャプタータイトル
		metadata	スクリプトが使用するためのトラック情報
srclang=""	テキストトラックの記述言語	言語コード	テキストトラックの記述言語
label=""	テキストトラックのタイトル	テキスト	テキストトラックのタイトル
default=""	デフォルトのテキストトラック	default	デフォルトのテキストトラック

“kind”属性を指定しないか値に“subtitles”を指定している場合は“srclang”属性は必須属性です。

＃

WebVTTファイル

“WebVTT(Web Video Text Tracks)”はW3Cが策定している、“track”要素で“audio”要素と“video”要素に字幕を追加するためのフォーマットです。

WebVTTファイルの書式

WebVTTファイルの書式について解説していきます。

WebVTTファイルは“メモ帳”などのテキストエディタで簡単に作成することができます。

まず、先頭に“WEBVTT”と記述します。


WEBVTT

“WEBVTT”と同じ行に半角スペース(“ ”)を挟んでテキストトラックの簡単な説明などに利用できるテキストヘッダーを記述することができます。


WEBVTT 春はあけぼのの翻訳字幕

続いてキューとコメントを記述できます。

キュー

“キュー(cue)”は実際にユーザーに表示される字幕の一節を表します。

キューの最初には字幕を表示し始める時間、続いて同じ行に“-->”を挟んで字幕の表示を終わる時間を記述します。時間の表記は“hh:mm:ss.ttt”もしくは“mm:ss.ttt”の形式で記述します。


00:00:01.000 --> 00:00:05.000

次に改行を挟んで字幕の内容を記述します。字幕の内容は複数行に跨がることができます。


00:00:01.000 --> 00:00:05.000

Våren är bäst när natten är på väg att gry.

ただし、空行はキューの終わりとして認識されますのでキューの途中に含むことができません。

また、キューには任意でスクリプトで使用するためにキューIDを付けることができます。


1

00:00:01.000 --> 00:00:05.000

Våren är bäst när natten är på väg att gry.

字幕の表示時間を記述する部分以外のテキストヘッダーやキュー、コメントのテキストには“-->”を含むことはできません。また、“<“と“&“はそれぞれ文字参照(“<“は“<“、“&“は“&“)する必要があり、“>“も文字参照(“>“)することが推奨されます。

キューとコメントを必要なだけ記述します。キューとコメントはそれぞれ間に空行が入るように配置します。


WEBVTT 春はあけぼのの翻訳字幕



NOTE この翻訳は機械翻訳だから正確ではないかもしれない



00:00:01.000 --> 00:00:05.000

Våren är bäst när natten är på väg att gry.



NOTE この下はあまり自信がない



00:00:05.000 --> 00:00:10.000

När solen gick upp blev den gradvis vitare,



00:00:10.000 --> 00:00:15.000

området runt bergen blev något ljusare och de långa,



00:00:15.000 --> 00:00:20.000

lila-färgade molnen var underbara.

WebVTTのファイル形式は“.vtt”で文字エンコードは“UTF-8”で保存します。

字幕のデモ

以下は実際に“video”要素で埋め込まれた動画に付けた字幕の例です。

＃

複数のテキストトラックの埋め込み

“audio”要素や“video”要素の中に複数の“track”要素を配置することで複数のテキストトラックを埋め込むことができます。

ただし、以下の条件をすべて満たす“track”要素を複数同じ“audio”要素や“video”要素の中に配置することはできません。

“kind”属性をともに指定していない、もしくは値が同じ
“srclang”属性をともに指定していない、もしくは値が同じ
“label”属性をともに指定していない、もしくは値が同じ

複数のテキストトラックが提供される場合、ユーザーは“controls”属性によるインターフェースなどからテキストトラックを選択できます。

＃

仕様書

“track”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書


<track>


kind=""
src=""
srcdoc=""
label=""
default=""

DOMインターフェース




[Exposed=Window]

interface HTMLTrackElement : HTMLElement {


  [HTMLConstructor] constructor();



  [CEReactions] attribute DOMString kind;

  [CEReactions] attribute USVString src;

  [CEReactions] attribute DOMString srclang;

  [CEReactions] attribute DOMString label;

  [CEReactions] attribute boolean default;



  const unsigned short NONE = 0;

  const unsigned short LOADING = 1;

  const unsigned short LOADED = 2;

  const unsigned short ERROR = 3;

  readonly attribute unsigned short readyState;



  readonly attribute TextTrack track;


};

UAスタイルシート



@namespace url(http://www.w3.org/1999/xhtml);




track {


 display: none;

 
}