Skip to content

Web動画のSRTをVTTに変換する方法 — 無料ガイド | AllSubConverter

- 5 min read

ウェブサイトに動画を埋め込んだのに字幕が読み込まれない、という経験はありませんか?ほとんどの場合、原因はフォーマットです。インターネット上の字幕ファイルの多くはSRTですが、ブラウザが期待するのはVTTです。このガイドでは、その理由を説明し、数秒でSRTをVTTに変換する方法を紹介します。

なぜWebプレーヤーはVTTを必要とするのか

HTML5の <video> 要素はアクセシビリティを考慮して設計されており、キャプションと字幕のための <track> 子要素を提供しています。しかし、<track> 要素が公式にサポートしているテキストトラックフォーマットはWebVTT(Web Video Text Tracks)だけです。

<track> に生の .srt ファイルを指定してみてください。ほとんどのブラウザは黙ってそれを無視します。キャプションボタンは表示され、ファイルはダウンロードされますが、何もレンダリングされません。だからこそ、Webで動画を公開する人にとって変換ステップは避けられません。

要するに:HTML5はVTTしか理解しません。SRTを配信すると、字幕は見えないままです。

SRTとVTTの違い — 実際に何が変わるのか

2つのフォーマットは似ており、テキスト内容は通常キューごとに同一です。違いは小さいですが、厳密に適用されます:

項目 SRT VTT
ヘッダー なし WEBVTT で始まる必要あり
時間区切り ミリ秒前にカンマ(00:01:02,500 ミリ秒前にピリオド(00:01:02.500
キューシーケンス番号 必須(1、2、3…) 任意
キュー設定 非対応 対応(align:center line:90%
インラインスタイリング 非対応 <b><i><u> で対応

2つのタイムスタンプルールが再生を壊す原因です。ブラウザはVTTを解析する際、ミリ秒の区切りとしてピリオドを期待します。SRTが使うカンマに遭遇すると、そのキューブロック全体が不正な形式としてスキップされます。

WEBVTTヘッダーの要件

すべての有効なVTTファイルは、最初の行に WEBVTT という文字列で始まり、その後に空行が続く必要があります。このヘッダーがないと、ブラウザはファイルを完全に拒否します。最小限のVTTファイルは次のようになります:

WEBVTT

00:00:01.000 --> 00:00:04.000
シリーズにお帰りなさい。

00:00:04.500 --> 00:00:07.000
今日はWeb用の字幕を変換します。

SRTの同等物と比較してみてください。番号付きキューとカンマ区切りのタイムスタンプがあります:

1
00:00:01,000 --> 00:00:04,000
シリーズにお帰りなさい。

2
00:00:04,500 --> 00:00:07,000
今日はWeb用の字幕を変換します。

ステップバイステップ:SRTをVTTに変換

  1. コンバーターを開く。 SRT to VTTツールにアクセスします。インストールも登録も不要です。
  2. SRTファイルをアップロード。 ファイルをドラッグ&ドロップ、テキストをボックスに貼り付け、またはデバイスから選択します。バッチジョブ用に複数ファイルに対応しています。
  3. 変換を実行。 ツールが WEBVTT ヘッダーを挿入し、すべてのカンマタイムスタンプ区切りをピリオドに置き換え、キューフォーマットを正規化します。
  4. VTTファイルをダウンロード。 結果をコピーするか、ブラウザが自動的に関連付けるよう動画の隣に一致するファイル名で保存します。
  5. プレーヤーに組み込む。 <track> 要素からファイルを参照すれば完了です。

典型的なHTML5のセットアップは次のようになります:

<video controls>
  <source src="intro.mp4" type="video/mp4">
  <track label="日本語" kind="subtitles"
         srclang="ja" src="intro.vtt" default>
</video>

ブラウザ互換性のメリット

VTTへの変換は、単にパーサーを通すだけではありません。実際のブラウザ機能をアンロックします:

  • Chrome、Firefox、Safari、Edgeでのネイティブキャプションコントロール(JavaScript不要)
  • kind="captions" 属性によりスクリーンリーダーが認識するアクセシブルなキュー
  • 必要な言語のための右から左(RTL)および縦書きモード
  • kind="chapters" によるチャプターマーカー
  • キューレベルの位置指定で、画面上のテキストから字幕を遠ざけることが可能

VTTはVideo.js、Plyr、Shaka Player、YouTube IFrame APIなどの主要なWebプレーヤーとも連携するため、変換した1つのファイルがカスタムビルドと既製プレーヤーの両方で機能します。

避けるべきよくある落とし穴

  • 二重ヘッダー。 ソースにすでに余分な WEBVTT 行が含まれている場合、単純なコピー&ペーストで2つ生成される可能性があります。コンバーターがこれを自動的に重複排除します。
  • BOMとエンコーディングの問題。 VTTはBOMなしのUTF-8で保存してください。そうしないと一部のプレーヤーがヘッダーを誤読します。
  • MIMEタイプ。 ファイルは text/vtt として配信してください。厳格なブラウザは application/octet-stream をブロックします。
  • CORS。 VTTがページと異なるドメインにある場合、サーバーが適切なCORSヘッダーを送信しないとキャプションが黙って失敗します。

よくある質問

ブラウザはSRTを直接読めますか?

公式には読めません。HTML5仕様は <track> 内のWebVTTのサポートのみをブラウザに要求しています。一部のブラウザは寛容にSRTの解析を試みますが、これは信頼性が低く、バージョン間で一貫性がなく、本番の動画で頼るべきものではありません。

変換でタイミングは変わりますか?

全く変わりません。時間、分、秒、ミリ秒は同一です。秒とミリ秒の間の文字がカンマからピリオドに変わるだけです。キューの長さと同期ポイントは完全に同じままです。

SRTのキューナンバーは残すべきですか?

VTTではキューナンバーは任意であり、空行区切りがキューを定義するため、ほとんどのコンバーターは番号を削除します。残しても問題ありませんが、削除するとファイルがスリムになり、手動での差分確認や編集が容易になります。

複数言語のキャプションを追加するには?

言語ごとに1つの <track> 要素を追加し、それぞれに srclanglabel を指定します。どの言語を最初に表示するかは、1つのトラックに default を付けて制御し、視聴者がプレーヤーのキャプションメニューから切り替えられます。

キャプションをWeb対応にする準備はできましたか?

SRTファイルをワンクリックでクリーンなブラウザ互換VTTに変換 — 無料、プライベート、即時。

無料でSRTをVTTに変換 →

逆方向で、デスクトッププレーヤーやTV向けのプレーンな字幕が必要な場合は、VTT to SRTガイドがそのワークフローを説明しています。

関連記事

Related Reading

Format guide

SRT ファイルとは?SubRip 字幕フォーマットの解説 | AllSubConverter

SRT(SubRip)字幕ファイルの完全ガイド。SRT とは何か、ファイル構造、対応プレーヤー、長所短所、VTT や ASS との比較を学びましょう。

Format guide

VTTファイルとは?WebVTT字幕フォーマットの完全解説 | AllSubConverter

VTT(WebVTT)字幕ファイルの完全ガイド。VTTとは何か、そのファイル構造、SRTとの違い、ブラウザサポート、HTML5動画でWebVTTを使うべきケースをわかりやすく解説。

Comparison

SRT と ASS:どちらの字幕フォーマットを使う? | AllSubConverter

SRT と ASS:字幕フォーマットを並べて比較。構造、タイムスタンプ、スタイル、プラットフォーム対応、用途の違いを確認。無料の SRT → ASS コンバータ。

Comparison

SRT と LRC:どちらの字幕フォーマットを使う? | AllSubConverter

SRT と LRC:字幕フォーマットを並べて比較。構造、タイムスタンプ、スタイル、プラットフォーム対応、用途の違いを確認。無料の SRT → LRC コンバータ。

Comparison

SRT と SBV:どちらの字幕フォーマットを使う? | AllSubConverter

SRT と SBV:字幕フォーマットを並べて比較。構造、タイムスタンプ、スタイル、プラットフォーム対応、用途の違いを確認。無料の SRT → SBV コンバータ。

Comparison

SRT と SCC:どちらの字幕フォーマットを使う? | AllSubConverter

SRT と SCC:字幕フォーマットを並べて比較。構造、タイムスタンプ、スタイル、プラットフォーム対応、用途の違いを確認。無料の SRT → SCC コンバータ。