WebVTT
WebVTT(Web Video Text Tracks)はHTML5のビデオ・オーディオ要素にキャプション、字幕、メタデータを追加するための標準フォーマットです。テキストファイルとして記述でき、CSSでスタイリング可能です。VTTCue APIを使用してJavaScriptから動的にキューを作成・更新することもできます。
概要
WebVTT(Web Video Text Tracks)はHTML5のビデオ・オーディオ要素にキャプション、字幕、メタデータを追加するための標準フォーマットです。テキストファイルとして記述でき、CSSでスタイリング可能です。VTTCue APIを使用してJavaScriptから動的にキューを作成・更新することもできます。
対応ブラウザ
デスクトップ
Chrome 23+
Edge 12+
Safari 6+
Firefox 31+
モバイル
Chrome Android 25+
Safari iOS 8+
Firefox Android 31+
基本構文
HTML
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="subs.vtt"
srclang="ja" label="日本語">
</video> 実務での使いどころ
-
ビデオ字幕の追加
動画コンテンツに多言語字幕を追加し、聴覚障害者や非母語話者にもコンテンツを提供します。
注意点
- WebVTTファイルのエンコーディングは必ずUTF-8で保存し、正しいMIMEタイプ(text/vtt)でサーバーから配信してください。
アクセシビリティ
- 字幕は聴覚障害のあるユーザーにとって不可欠です。すべての動画コンテンツにWebVTT字幕を提供することを強く推奨します。