HTML の track 要素を生成
字幕テキストを貼り付けることもできます
オプション
字幕（Subtitles）は音声が聞こえる視聴者向けで、言葉を必要とする人、つまり翻訳や同じ言語の文字起こしのためのものです。キャプション（Captions）は音声が聞こえない視聴者向けで、他の人に音が伝えている情報も含みます。音楽、ドアの音、電話の呼び出しなどです。同じファイルがどちらの用途にも使えるため、このページは推測せずに尋ねます。また、この値は要素の中で後から変更できません。説明、チャプター、メタデータは選択肢にありません。いずれも字幕ファイルの内容では埋められないからです。
en、en-GB、pt-BR のような短い言語タグで、字幕に書かれた言葉の言語を示します。動画の言語ではありません。字幕と名乗るトラックは言語の指定が必須なので、この欄を空にすると属性を落とすのではなく en に戻ります。出力にはすべての属性が表示されるため、貼り付ける前にこの代替値も確認できます。
自由入力です。English、English (SDH)、Français など。ページに複数のトラックがあるとき、視聴者が選ぶ行になるので、想定する読者が見て分かる名前にしてください。欄を空にすると空の属性を書くのではなく属性ごと削除され、名前はプレーヤーに任されます。空のラベルはメニューに名前のない行を作ってしまうからです。
オンにすると、動画の再生と同時に字幕が表示されます。メディア要素が既定にできるトラックは1つだけなので、ページにすでに既定のトラックがある場合はオフにしてください。2つ目のトラックが既定を名乗るとプレーヤーは誤った方を選びますが、既定にしない場合は視聴者が自分でオンにするだけです。
タイミングを数える基準のフレームレートです。形式のページでは MicroDVD が必要とする値で、同形式は時間をフレーム番号で保存します。フレームレートのページでは、そのファイルがどのレートを前提に作られたか（字幕が合わせて作られた版）を指し、ページの2つ目の欄には実際に使う動画のレートを入れます。よく使われるのは 23.976、24、25、29.97、30、50、59.94、60 です。間違えると時間軸全体がずれます。フレームレートのページでは、ずれは固定量ではなく比率で生じます。
この頁は字幕を、ページに貼り付けられる 1 つの HTML 要素に収めます。出てくるのは 1 行の `<track>` で、WebVTT を `src` 属性に直接埋め込むので、字幕テキストがマークアップそのものと一緒に移動します。別のファイルをアップロードする必要も、パスを合わせる必要も、プレーヤーが存在しないものを探しに行くこともありません。
インライン化がこの頁の要点で、理由はブラウザのローカルファイルの扱いにあります。track は描画ではなく取得され、ページ自体がディスクから開かれているとブラウザはその取得を拒みます。だからデスクトップに保存したページの `<track src="film.vtt">` は何も表示しません。画面にエラーは出ず、字幕メニューは空で、コンソールに 1 行が出るだけです。その 1 行を開く人はほとんどいません。`data:` URI は取得されません。テキストが属性の中にあるからです。だからそこでは動きます。代償はサイズで、WebVTT の空白や改行が 3 文字になる分だけ大きくなりますが、その代償はここでは払う価値があります。この要素は単体で動くために存在するからです。
属性はパネルの箱から来ます。どれもファイルから読み出せないからです。`kind` が最も重要です。subtitles は音声を追えない視聴者のための翻訳で、captions は音を聞けない視聴者のために音楽や効果音も載せる完全版です。`[door slams]` や音符でいっぱいのファイルはどちらにもなり得て、どちらの観客向けに作られたかを知っているのはあなただけです。だから頁は推測せずに尋ねます。残りの 3 つはテキストの言語、プレーヤーの字幕メニューに出る名前、トラックを自動で開くかどうかです。
このうち 2 つの箱は空にしたときの振る舞いが違い、その違いは知っておく価値があります。メニュー名を消すと属性ごと消えます。ラベルは任意で、省けば選択をプレーヤーに委ねるだけだからです。言語の箱を消してもそうはなりません。自らを subtitles と宣言するトラックは言語を名乗る必要があるので、空の箱は、必須のものを欠いた要素ではなく `en` に戻ります。どちらも黙った置き換えではありません。出力はすべての属性を印字するので、箱が何を生んだか分かります。
要素の中の字幕テキストは、変換頁と同じ WebVTT ライターが書きます。だから WebVTT として届いたファイルは、cue の外に持っていたもの — `WEBVTT` 行のテキスト、コメントとスタイルのブロック、行が画面のどこに座るかを決める cue ごとの設定 — をすべて保ちます。ファイルは何も変更されず、何も送信されません。言葉も時刻も書式も、届いた状態のまま出ていきます。
例
SRT ファイルを既定の箱で
入力
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
出力
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
1 行が出て、ファイル全体がその中にあります。%0A は改行、%20 は空白なので、WebVTT はページの隣のファイルではなく src 属性に乗っています。4 つの属性は 4 つの箱です。テキストの言語、プレーヤーの字幕メニューで視聴者が選ぶ行、自動で開く default です。SRT の cue 番号は cue 識別子として保たれます。
WebVTT ファイルは同じ WebVTT として出る
入力
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
出力
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
WebVTT ファイルが cue の外に持つものはすべて残ります。WEBVTT 行の注記、NOTE ブロック、プレーヤーでの見え方を決める STYLE ブロック、cue の名前行、cue ごとの align:start position:10% です（%25 はパーセント記号で、URI 内に裸のパーセント記号は置けないため符号化されています）。WebVTT として入ったファイルは同じ WebVTT として出ます。2 つの箱が en-GB と English (UK) なのは、このコピーが英国の観客向けに作られたからで、ファイルはそれをどこにも述べていません。
音を聞けない視聴者のための字幕
入力
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
出力
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
効果音と音楽でいっぱいのファイルで、まさに kind="captions" — 音を聞けない視聴者のための字幕 — の用途で、それを言えるのは箱だけです。別に、メニュー名を Tom & "the boss" と入力すると Tom & "the boss" として出ます。エスケープしない引用符はそこで属性を閉じ、名前の残りを要素の壊れた属性に変えてしまうからです。
3 つの箱を空にする、または切る
入力
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
出力
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
3 つの箱を変え、3 つの違う結果になりました。HTML が求めるものが違うからです。メニュー名は要素から完全に消えました。任意で、省けば選択をプレーヤーに委ねます。言語の箱は空でも srclang="en" を生みます。自らを subtitles と宣言するトラックは言語を名乗る必要があり、空という状態は存在しないので、戻り値が出力に見えます。default スイッチは切られ、その属性も消えたので、このトラックは自動で開きません。ページが複数のトラックを持つときの安全な向きです。
よくある質問
ページの隣に .vtt ファイルはまだ必要ですか？
いいえ、それがこの頁の要点です。WebVTT は data: URI として src 属性に書かれるので、要素が自分の字幕を運びます。ページに貼り付けても、ファイルをメールで送っても、別のフォルダに移しても字幕は現れます。注意すべきは全体が 1 つの属性であることです。長い行の一部だけをコピーすると URI が壊れ、トラックは空になります。
自分のパソコンから HTML ファイルを開くだけでも動きますか？
動きます。その場合こそこの頁が字幕をインライン化する理由です。ページをディスクから開くと、ブラウザは別のトラックファイルの取得を拒むので、film.vtt を指す track は何も表示しません。目に見えるエラーはなく、字幕メニューが空になるだけです。data: URI は取得されず、テキストはすでに属性にあるので、デスクトップでもサーバー上でも同じように動きます。
出力が字幕ファイルよりずっと長いのはなぜですか？
英数字以外のすべての文字が URI では 3 文字になるからです。空白は %20、改行は %0A です。100 KB のファイルが数百 KB になります。Base64 なら元の 3 分の 1 増しほどで短くなりますが、読めない文字の壁になります。今の形なら src 属性を見て自分のセリフを見分けられます。ページに貼って手で保守するファイルでは、その分の大きさに価値があります。
箱を空にしたのに label 属性がないのはなぜですか？
メニュー名は HTML で任意で、省くことは「名前なし」ではなく「プレーヤーが字幕メニューに何を出すかを決める」ことだからです。ふつうは言語が出ます。だから箱を空にすると空の属性ではなく属性ごと消えます。label="" はメニューに空白の行として見えてしまうからです。名前はいつでも戻せます。ただの文字列で、ページのほかの何もそれに依存しません。
ここでの subtitles と captions の違いは何ですか？
誰のためかです。subtitles は視聴者が音声を聞ける前提で、言葉の翻訳や書き起こしを必要とします。captions は音声を聞けない前提で、音楽、ドア、電話の音など、聞こえる観客に音で届く情報も載せます。同じファイルがどちらの用途にもなり得て、テキストは同じなので、頁はどちらを意味するか判断できません。要素の中で後から変えることもできないので、観客が必要とするほうを選んでください。
ほかの track の種類で省いたものは何ですか？
3 つです。descriptions は画面を見られない視聴者に映像を語り、chapters は字幕ではなくナビゲーションでこのサイトに専用の頁があり、metadata は誰にも表示されません。3 つとも字幕ファイルの中身で埋められないので、提供すれば何も表示しない要素を作れるだけです。提供している 2 つは、字幕ファイルが実際に担える 2 つです。
取り込む途中で字幕の中身は変わりますか？
テキスト、タイミング、書式は変わらず、WebVTT ファイルはコメント、スタイル、リージョンのブロックと cue ごとの設定を保ちます。変わるのは形です。行はプレーヤーが読む WebVTT の文法で書き直されるので、SRT の 00:00:01,000 のカンマはピリオドになります。1 バイトだけ意図的に落とします。ファイルが UTF-8 であることを示す先頭のマーカーで、data URI が符号化自体を述べるため、残すと先頭に 3 つの余計な文字として現れます。