SubRip（.srt）をWebVTTに変換

HTML5の<track kind="captions" src="captions.srt">タグに.srtファイルをそのまま指定しようとした経験がある方は、ブラウザがそれを単純に無視することに気づいたはずです。<track>要素（および最新のブラウザがその周りに構築するネイティブの字幕メニュー）が理解できるのはWebVTTのみです。SubRipはデスクトップ向けプレーヤーやエディタの間で最も広くサポートされている形式であるにもかかわらず、HTML5の仕様にはまったく含まれていません。

修正方法は機械的ですが厳密です。WebVTTはファイルの先頭に文字通りのWEBVTT行を必要とし、すべてのタイムコードのミリ秒の区切り文字はSRTのカンマではなくピリオドでなければなりません（00:00:09,400 → 00:00:09.400）。どちらか一方でも間違えると、ブラウザはエラーメッセージを出さずに字幕の表示に黙って失敗します。SubToolDeskの変換ツールはSRTをローカルで解析し、有効なヘッダーと修正されたタイムコードで再構築し、キューをきれいに振り直します。すべてブラウザのタブ内で行われます。

手順ごとの説明

• 上の変換ツールに.srtファイルをドラッグするか、その内容を左側のパネルに貼り付けます。
• 形式バッジがSRTを検出していることを確認します。
• ダウンロードを押して、元のファイル名に合わせた有効な.vttファイルを保存します。
• <track>要素から参照します：<track kind="captions" src="/captions.vtt" srclang="en" label="English">。

なぜSRTをWebVTTに変換するのか

.srtファイルはデスクトップのエディタでは問題なく同期しますが、ブラウザでは何もしません。WebVTTへの変換は、ほぼ必ず次のいずれかが理由です。

• 理由：自前でホストする<video>要素にキャプションを追加しており、HTML5の<track>タグが実際に理解できる形式が必要な場合。
• 理由：アクセシビリティ要件（WCAG 2.1のキャプション基準など）を満たす必要があり、ブラウザが黙って無視する形式ではなく、標準に準拠したキャプションが必要な場合。
• 理由：利用している動画プラットフォーム、CMS、またはドキュメントサイトのスクリーンキャスト埋め込みが.vttのアップロードしか受け付けない場合。
• 理由：エディタ、フリーランサー、またはキャプション制作会社から.srtファイルを受け取り、そのまま組み込める状態のものを開発者に渡す必要がある場合。
• 理由：SRTを書き出していたプラットフォームから、ブラウザ標準のキャプション機能を前提としたカスタムプレーヤーへ、動画ライブラリを移行している場合。
• 理由：ffmpegをインストールしたり、1ファイルのためだけに変換スクリプトを書いたりせずに、この修正を済ませたい場合。

変換前と変換後：実際の例

カンマ区切りのタイムコードと連番を含む短い3キューのSRTファイルを、話者ラベルを削除と書式タグを削除の両方をオフにして変換した例です（有効なWebVTTを生成するために何も取り除く必要がないため、このページの既定の状態です）。

1
00:00:01,200 --> 00:00:04,000
お帰りなさい、今日は第3四半期の数字を取り上げます。

2
00:00:04,300 --> 00:00:07,900
お招きいただきありがとうございます。早速始めましょう。

3
00:00:08,100 --> 00:00:11,500
売上は前年同期比で8パーセント増加しました。

WEBVTT

1
00:00:01.200 --> 00:00:04.000
お帰りなさい、今日は第3四半期の数字を取り上げます。

2
00:00:04.300 --> 00:00:07.900
お招きいただきありがとうございます。早速始めましょう。

3
00:00:08.100 --> 00:00:11.500
売上は前年同期比で8パーセント増加しました。

キューのテキスト、タイミング、そしてキュー番号までもがそのまま引き継がれています。追加されるのはWEBVTTヘッダーのみで、ミリ秒の前のすべてのカンマがピリオドに変わります。これはブラウザがファイルを受け入れるために必要な、まさにその2つの変更です。

変換前と変換後

SRT入力:
1
00:00:09,400 --> 00:00:12,900
売上は8パーセント増加しました。

VTT出力:
WEBVTT

1
00:00:09.400 --> 00:00:12.900
売上は8パーセント増加しました。

なぜこれがWeb開発者にとって重要なのか

アクセシブルで字幕付きの動画は、公開向けサイトの多くにおいてユーザビリティとコンプライアンスの両方の要件です（WCAG 2.1の達成基準1.2.2は、録画済みメディアに対するキャプションを要求しています）。そして<track>要素は、サードパーティの動画プラットフォームを使わずにそれを提供するための標準準拠の方法です。編集パイプライン（またはフリーランサー）が.srtファイルしか渡してくれない場合、ここで変換すれば数秒でそのまま使えるWebVTTアセットが手に入り、ffmpegのインストールや変換スクリプトの作成は不要です。

あなたの環境で処理、当社のサーバーではない

これはプレーンテキストの再形成にすぎないため、メディアファイルには一切触れず、アップロードもされません。処理されるのはキャプションテキストのみで、それもあなた自身のブラウザタブの中だけです。これは社内向けのプロダクトデモ動画であっても、公開のマーケティングページであっても同様に重要です。

変換結果を<track>要素で使う

変換したファイルをダウンロードしたら、<track>子要素を使って<video>マークアップに追加します。

<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track
    kind="captions"
    src="/captions.vtt"
    srclang="en"
    label="English"
    default>
</video>

default属性は、ブラウザにこのトラックを自動的に有効にするよう指示します。複数の言語トラックを提供していて視聴者に選んでもらいたい場合は省略してください。ブラウザはWEBVTTヘッダーを厳密に検証します。ヘッダーが欠落していたり誤って記述されていたりすることが、ファイルの他の部分が正しく整形されていてもキャプションが黙って表示されなくなる、最も一般的な原因です。

この変換ツールが想定する利用者

自前でホストする動画プレーヤーにキャプションを追加するフロントエンドおよびフルスタック開発者が主な対象ですが、開発者に資産を納品する動画制作チームも、形式変換を誰か他の人の未処理タスクとして残すのではなく、確実に動作するものを引き渡すためにこれを使用します。スクリーンキャストを埋め込むオープンソースのドキュメントサイトや、アクセシビリティ準拠のために研修動画に字幕を付ける社内ツールチーム、そしてSRTを書き出していたプラットフォームから、ブラウザ標準のキャプション機能を前提としたカスタムプレーヤーへ動画ライブラリを移行している人にも、同様に役立ちます。

この変換ツールが保持するものと変更するもの

保持されるもの：

• 元のファイルに含まれるタイプミスも含め、発言されたすべての単語をそのまま保持します。
• すべてのキューのミリ秒単位の正確なタイミングを、そのまま引き継ぎます。
• 元の順序どおり1キュー1ブロックとし、キュー番号は1から連番で振り直されます。
• 話者ラベルを削除または書式タグを削除をオンにしない限り、キューテキスト内の話者接頭辞やインラインタグはそのまま残ります。

変更または削除されるもの：

• WebVTTは00:00:04.000を要求し、SRTの00:00:04,000ではないため、すべてのタイムコードでミリ秒前のカンマがピリオドに変わります。
• WebVTTには必須でSRTには存在しないため、ファイルの先頭にWEBVTTヘッダー行が追加されます。
• 話者1：のようなプレーンテキストの話者接頭辞は、話者ラベルを削除がオンの場合のみ削除されます。既定ではそのまま残ります。
• <i>や<b>などの書式タグは、書式タグを削除がオンの場合のみ削除されます。既定ではそのまま残ります。

よくある問題とその解決方法

• 変換後もブラウザがキャプションを表示しない場合：変換前に変換ツール上の形式バッジが実際にSRTと表示されていたか確認してください。貼り付けが大きく途切れていると、キューの検出が壊れ、空または不正な出力になることがあります。
• <i>や<b>タグがキャプション内に文字そのまま表示される場合：これは想定された動作です。WebVTTはこれらのタグをネイティブにサポートしているため、このページでは書式タグを削除は既定でオフになっています。プレーンテキストにしたい場合のみオンにしてください。
• 話者1：のような話者名がそのままVTT出力に引き継がれる場合：それらを取り除きたい場合は話者ラベルを削除をオンにしてください。既定でオンになっていないのは、この変換ツールが構造の忠実な再形成を前提としており、内容の編集ではないためです。
• 出力にミリ秒の前がピリオドではなくカンマのまま表示される場合：実際に出力された.vttファイルをダウンロードしたか、元の.srtファイルのコピーを見ていないか確認してください。変換ツール上の形式バッジと出力ラベルで、どちらを見ているか確認できます。
• ファイルが正しく見えるのにキャプションが表示されない場合：.vttファイルをテキストエディタで開き、最初の行が正確にWEBVTTだけになっているか（バイト順マークや空行を含まない）確認してください。この行が最初にない場合、ブラウザは黙ってファイルを拒否します。
• アクセント付きの文字や英語以外のテキストが変換後のファイルでéのような文字化けになる場合：元の.srtがUTF-8で保存されていません。WebVTTもSRTと同様にUTF-8のテキストを前提とするため、変換前にUTF-8として再書き出しまたは再保存してください。

変換で変わらないもの

ダイアログのテキストとミリ秒精度のタイミングは、書かれたとおりに正確に引き継がれます。これは構造上の再形成であり、再文字起こしではありません。元のSRTにタイプミスがあれば、そのタイプミスはVTT出力にも残ります。このツールが修正するのは形式の適合性であり、内容の正確性ではありません。変換と同時に話者ラベルやインラインの書式タグも整理したい場合、上の話者ラベルを削除と書式タグを削除の切り替えはWebVTT構文に書き換える前のキューテキストに適用されるため、別々のツールを2回実行する代わりに、形式変換と内容の整理を一度の処理でまとめて行えます。