Webビデオテキスト・トラックフォーマット (WebVTT)

Table of Contents

Webヴィティティ(WebVTT)とは、時間指定のテキストトラック(字幕やキャプションなど)を表示するためのフォーマットで、ファイル拡張子は.VTT

vttファイルはWindowsの場合、メモ帳で作成できます。

ファイル名の基本ルールとして、一般的には

MyClosedCaptions.en.vtt ・・・ 英語フォーマット
MyClosedCaptions.ja.vtt ・・・日本語フォーマット

というように、ファイル名+国名+.vttで構成されています。

vttファイルをメモ帳で作成して保存するときには、「エンコード」をUTF-8にします。

WebVTTは、HTML5ビデオのフォーマットで使えます。

WebVTTが使えるプラットフォーム

ソースコード例

MyClosedCaptions.en.vtt

WEBVTT

00:00:01.000 --> 00:00:05.220
Hi! My name is Santa Claus.

00:00:05.400 --> 00:00:9.600
It's only 10 days until Christmas.

MyClosedCaptions.ja.vtt

WEBVTT

00:00:01.000 --> 00:00:05.220
こんにちは!私はサンタクロースです。

00:00:05.400 --> 00:00:9.600
クリスマスまであと10日ですね。

CSSも使える

HTMLファイルに記述する方法

<!doctype html>
<html>
 <head>
  <title>Styling WebVTT cues</title>
  <style>
   video::cue {
     background-image: linear-gradient(to bottom, dimgray, lightgray);
     color: papayawhip;
   }
   video::cue(b) {
     color: peachpuff;
   }
  </style>
 </head>
 <body>
  <video controls autoplay src="video.webm">
   <track default src="track.vtt">
  </video>
 </body>
</html>

VTTファイルに直接記入する

WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

NOTE comment blocks can be used between style blocks.

STYLE
::cue(b) {
  color: peachpuff;
}

hello
00:00:00.000 --> 00:00:10.000
Hello <b>world</b>.

コメントやチャプターも使える

WEBVTT

NOTE
This is from a talk Silvia gave about WebVTT.

Slide 1
00:00:00.000 --> 00:00:10.700
スライドタイトル

Slide 2
00:00:10.700 --> 00:00:47.600
総理大臣からのお言葉

もっと詳しい記述方法はW3C WebVTT: The Web Video Text Tracks Formatをご覧ください。

YouTubeへvttファイルを追加する方法

YouTubeの字幕ファイルは大きく分けて2カテゴリの字幕ファイルが用意されています。

  1. 基本的なファイル形式
  2. 高度なファイル形式

vttファイルは「2.高度なファイル形式」に分類され、初期から実装されています。
でもCSSスタイル設定で使えるのは、<b>、<i>、<u> のみです。

字幕の追加方法は、YouTubeのページを見た方が早いので、こちらをご覧ください。
簡単に説明すると、以下の通りです。

  1. YouTube Studio にログインします。
  2. 左側のメニューから [字幕] を選択します。
  3. 編集する動画をクリックします。
  4. [言語を追加] をクリックして言語を選択します。
  5. [字幕] 列にある [追加] をクリックします。

注: アップロード処理中に字幕を追加することもできます。

google 広告