SRT ～ VTT: ブラウザが実際にロードする字幕

SRT と VTT の間で何が変わるのか

• ヘッダー - WebVTT ファイルは `WEBVTT` 行で始まり、オプションでその後にタイトルが続きます。
• タイムコード — SRT は、ミリ秒の前にカンマを付けて `00:00:12,500` を書き込みます。 VTTは`00:00:12.500`をドットで書きます。
• キュー識別子 — どちらもキューの上にオプションの名前を付けることができます。 VTT にすると、スクリプト作成にさらに便利になります。
• 終了タイムコード — SRT では必須。 VTT は次のキューから終了を推測できますが、明示的な方が安全です。
• 追加機能 — VTT は、行の位置、配置、テキスト マークアップなどのキュー設定を追加します。

スタイリングと安全なマークアップ

WebVTT では、キュー内で制限されたタグのセット (`::cue` を介して CSS でスタイル設定するクラスの `<b>`、`<i>`、`<u>`、および `<c.classname>`) を許可します。それ以外のものはリテラル テキストとしてレンダリングされる可能性が高くなります。これは、変換時にマークアップを目に見える山かっこにエスケープするのではなく、単純な書式設定が存在する場合は保持し、その書式で表現できないものを削除する必要がある理由でもあります。

                WEBVTT

00:00:12.500 --> 00:00:15.000 align:start
That was the point.
              

再生以外にも重要な理由

キャプションはほとんどのプラットフォームでアクセシビリティ要件であり、インデックス付きの素材でもあります。テキスト トラックは、音声だけでは提供できない機械可読スクリプトを検索エンジンとアシスタントに提供します。したがって、正しくエンコードされた `<track kind="captions">` は、コンプライアンスを満たし、ビデオに他の方法では欠けているテキストの存在感を与えるという 2 つの役割を果たします。

エンコーディングが重要です。VTT は、適切な文字セットを使用した UTF-8 として機能します。従来のエンコーディングで保存されたアクセント付き文字を含むファイルは、プレーヤーではモジバケとしてレンダリングされ、エンコーディングの問題ではなく変換バグのように見えます。

実際のワークフロー

1. SRT を VTT に変換し、最初と最後のキューが正しいタイムコードであるかどうかを確認します。
2. .vtt 拡張子を付けて UTF-8 として保存し、サーバーを制御する text/vtt コンテンツ タイプで提供します。
3. `<track kind="captions" srclang="en" label="English"default>` で video 要素から参照します。
4. デプロイ後も相対パスが機能し続けるように、ビデオ ファイルと一緒にキャプション ファイルをアップロードします。

オフラインでもインスタントでも

字幕ファイルは大きなテキスト ドキュメントであり、多くの場合未公開の作品です。レビュー カットのスクリプトはどこにもアップロードすべきではありません。このサイトの SRT から VTT へのコンバータはブラウザで実行されるため、2 時間のトランスクリプトはマシンを離れることなく、ほんの数秒で変換されます。