エージェント向け Polysh を早期アクセスで提供中。コーディングエージェントがデモを録画し、Polysh が仕上げます。 ウェイティングリストに登録 →

VTT バリデーター

WebVTT ファイルがプレーヤーで使えない理由を正確に知り、修正版をダウンロードできます。

ブラウザツールを読み込んでいます…

VTT バリデーターでできること

ブラウザは WebVTT に厳格です。1 行目にないヘッダー、タイムスタンプのカンマ、最初のキューの後に置かれた STYLE ブロックだけで、トラックが字幕なしで読み込まれることがあり、開発者コンソールもその理由をほとんど教えてくれません。

ファイルを貼り付けると、ヘッダーの後の空行の抜けから、テキストを隠してしまうエスケープされていない & まで、すべての問題が行付きで一覧表示されます。「問題を修正」は修正後のファイルを書き出し、もう一度検証します。空のキュー、並べ替え、重なりといった日常的な整理も修復に含まれます。

例

入力

WEBVTT
00:00:01.000 --> 00:00:03.000 align:centre
利用規約 & プライバシー

00:00:03.000 --> 00:00:05.000
完了です。

レポートの表示

2 行目 [エラー] WEBVTT ヘッダーと最初のキューの間に空行を入れてください。
2 行目 [エラー] 無効なキュー設定「align:centre」を無視しました。有効な設定は line:0、position:10%、align:start、size:80% のような形式です。
3 行目 [エラー] キュー 1 にそのままの「<」または「&」があります。&lt; または &amp; と書かないと、テキストの一部が表示されないことがあります。

WebVTT が受け付けるのは align:center というつづりだけです。「問題を修正」は空行を追加し、無効な設定を削除して &amp; と書き出し、修正後のファイルは検証を通過します。

VTT バリデーターの使い方

  1. WebVTT のテキストを貼り付けるか、「ファイルを開く」か「例を使う」を選びます。
  2. 行番号順に並んだ「問題」の表を確認します。
  3. 「問題を修正」を選び、「修正後のファイル」のパネルで「.vtt をダウンロード」を選びます。

知っておきたいこと

  • STYLE ブロック内の CSS はチェックしません。::cue ルールの入力ミスは検証を通過しますが、スタイルは適用されません。
  • リージョン名の照合は行わないため、ファイルで定義されていないリージョンを参照するキューも受け付けられます。
  • 重複したキュー ID は警告で、「問題を修正」ではそのまま残ります。VTT エディターで名前を変えてください。

VTT バリデーターについてよくある質問

VTT の字幕が表示されないのはなぜですか?

ファイルが 1 行目の WEBVTT で始まっているか、ミリ秒の前にドットを使っているか、ヘッダーの後とキューの間に空行があるかを確認してください。Web サイトでは、text/vtt として配信し、別のドメインにある場合は CORS ヘッダーも必要です。バリデーターは、ファイル内のことはすべてチェックします。

WebVTT ファイルを検証するには?

ここに貼り付けるか開きます。バリデーターはヘッダー、タイムスタンプ、設定、エスケープ、順序の問題を行番号付きで報告し、それぞれをエラーか警告に分類するので、何から直せばよいかがわかります。

WebVTT では & をエスケープする必要がありますか?

はい。そのままの & や < はマークアップの始まりとして読まれることがあり、プレーヤーがその後のテキストを隠す場合があります。代わりに &amp; と &lt; と書いてください。「問題を修正」でエスケープできます。

WebVTT ファイルに BOM を付けてもよいですか?

はい。この形式では、WEBVTT の前に UTF-8 のバイトオーダーマークを付けることが認められています。ただし、古いツールではファイルの先頭に不要な文字として表示されることがあるため、バリデーターは警告として示します。