WebVTT字幕を生成 — ウェブ動画のW3C標準
ドットタイムスタンプ区切り、WEBVTTヘッダー、HTML5の<track>要素、HLSストリーム、すべての最新ブラウザで動作するキュー構造を持つ適切にフォーマットされたVTTファイル。
ファイルをここにドロップするかクリックして参照
.mp3, .wav, .m4a, .aac, .ogg, .flac, .mp4, .mov, .avi, .mkv, .webm·最大500MB
WebVTT：ウェブが実際に使用する字幕フォーマット
WebVTT（Web Video Text Tracks）はHTML5動画の字幕用W3C標準です。SRTとは異なり、VTTは::cue疑似要素によるCSSスタイリング、キューの配置と整列設定、NOTEコメントブロック、チャプターマーカーをサポートします。HLS（HTTP Live Streaming）の必須字幕フォーマットです — 映像をストリーミングするなら、SRTではなくVTTが必要です。Vocovaはあらゆる音声・映像ソースから仕様準拠のWebVTTファイルを生成します。
使い方
任意の音声・映像ファイルをアップロード
任意のメディアファイルをドラッグ＆ドロップしてください。主要なすべてのフォーマットに対応し、字幕生成のための音声を抽出します。
- 全音声形式：MP3、WAV、M4A、AAC、OGG、FLAC、WMA
- 全映像形式：MP4、MOV、AVI、MKV、WebM、WMV
- 最大500MBのファイルに対応
AIが文字起こしとVTTフォーマット変換
音声を文字起こしし、適切なタイミング、必須のWEBVTTヘッダー、W3C仕様に準拠したドット区切りタイムスタンプでWebVTTキューにセグメント化します。
- オプションのメタデータ領域を含むWEBVTTヘッダー
- ドット区切りのミリ秒（HH:MM:SS.mmm）
- 自然な読みの流れにセグメント化されたキュー
VTTファイルの確認とダウンロード
各キューをプレビューし、必要に応じてテキストを編集して、HTML5動画プレーヤー、HLSストリーム、ウェブプラットフォーム対応のVTTファイルをダウンロードできます。
- エクスポート前にキューテキストを編集
- 全体にわたるW3C準拠の構造
- 全言語対応のUTF-8エンコーディング
機能
CSS ::cueスタイリングサポート
WebVTT字幕は::cue疑似要素を使用してCSSでスタイリングできます。フォント、色、サイズ、背景、透明度を変更できます。::cue(b)、::cue(i)、ボイスセレクターで要素ごとのスタイリングも使用できます。これはSRTに対する主要な利点であり、SRTには標準的なスタイリングメカニズムがありません。
キューの配置と整列
VTTキューは位置、整列、サイズ、行配置の設定をサポートします。話者識別字幕を画面上部に配置したり、説明を左に配置したり、標準的な対話をセンターに配置できます。これらの配置コントロールはVTT仕様の一部であり、ハックではありません。
メタデータ用NOTEブロック
WebVTTはNOTEコメントブロックをサポートします — ファイル内に表示されますが画面には表示されないメタデータ。翻訳者のメモ、編集者へのコンテキスト、言語情報、バージョン追跡に使用できます。SRTには同等の機能がありません。
HLSストリーミング必須フォーマット
AppleのHLS仕様は字幕にWebVTTを要求しています — SRTはHLSマニフェストではサポートされません。HLS経由で映像を配信する場合（ほとんどのiOS動画、Apple TV、多くのCDNを含む）、VTTを使用する必要があります。当社のファイルはHLS統合に対応しています。
正しいMIMEタイプの処理
VTTファイルはMIMEタイプtext/vttで提供される必要があります。多くのウェブサーバーは.vttファイルをデフォルトでtext/plainとし、ブラウザが字幕トラックとして拒否する原因になります。この点を出力に記載しているため、サーバーを正しく設定できます — 字幕を無音で壊す一般的な落とし穴です。
Vocovaを選ぶ理由
HTML5動画にキャプションを追加
<video>タグ内の<track>要素を使用してネイティブにキャプションを追加できます。WebVTTはHTML5の<track>要素がサポートする唯一の字幕フォーマットです — SRTはここでは動作しません。1行のHTMLで動画にキャプションが付きます。
HLS動画ストリームに字幕を付ける
HLSは字幕にWebVTTを義務付けています。AWS MediaConvert、Cloudflare Stream、Mux、またはいずれかのHLSパイプラインを使用している場合、VTTファイルが必要です。ソースメディアから生成し、HLSマニフェストに含めましょう。
ブランドのCSSで字幕をスタイリング
::cue疑似要素を使用して、ブランドのフォント、色、背景処理でWebVTT字幕をスタイリングできます。デフォルトの黒い背景ボックスを削除、テキスト色を変更、フォントサイズを調整 — すべて標準CSSで可能です。
ウェブアクセシビリティ基準を満たす
WCAG 2.1はウェブ動画キャプションにWebVTTを推奨しています。映像コンテンツからVTTファイルを生成し、WCAGレベルA（録画メディアのキャプション）およびレベルAA要件を満たしましょう。
活用できる方
ウェブ開発者
サイト上のHTML5動画プレーヤーにWebVTTトラックを追加。kind='captions'またはkind='subtitles'で<track>要素を使用。CSS ::cueでスタイリングしてネイティブなキャプション体験を実現。
ストリーミングインフラエンジニア
HLSとDASHの字幕トラック用にVTTファイルを生成。アダプティブビットレートマニフェスト用にVTTファイルをセグメント化。WebVTTはHLSがネイティブでサポートする唯一の字幕フォーマットです。
eラーニングプラットフォーム開発者
LMSプラットフォームのコース動画にキャプションを追加。ほとんどの最新LMSシステム（Canvas、Moodle、Blackboard）はHTML5動画を使用し、キャプショントラックにWebVTTを期待しています。
ウェブに公開するコンテンツクリエイター
ブログ、ポートフォリオ、メディアサイトに埋め込まれた動画用にVTT字幕ファイルを生成。WebVTTはプラグインやJavaScriptライブラリなしですべての最新ブラウザで動作します。
