仕様解説
WebVTTを利用した動画字幕
第1回 WebVTTの基本仕様

WebVTTは時系列に沿ったテキスト表示に利用されるデータフォーマットです。WebVTTを利用すれば、video要素を利用した動画に字幕を付けることができます。今回はWebVTTの仕様をじっくり解説します。

2017年02月23日発行

目次

WebVTTとは

WebVTT(ウェブブイティティ)とはWeb Video Text Tracksフォーマットの略であり、字幕などの時系列なテキスト表示に利用されるデータフォーマットです。

HTMLで動画を表示するためには、次のようにvideo要素を利用し、その要素内でsource要素を使用し、読み込む動画を指定します。その動画に対して、字幕を付けるためには、このWebVTTというデータフォーマットに沿って作成した.vttファイルを用意し、video要素内のtrack要素で読み込むように指定します。

vttファイルの読み込み例
<video class="with-caption" autoplay controls muted>
  <!-- 読み込む動画ファイルの指定 -->
  <source src="movie.mp4" type="video/mp4">
  <!-- 読み込む字幕ファイルの指定(日本語) -->
  <track label="日本語" kind="captions" srclang="ja" src="movie-ja.vtt" type="text/vtt" default>
  <!-- 読み込む字幕ファイルの指定(英語) -->
  <track label="English" kind="captions" srclang="en" src="movie-en.vtt" type="text/vtt">
</video>

本記事では、このWebVTTの書式や、読み込みについて解説していきます。まずはWebVTTについて解説します。

ブラウザのWebVTTへの対応状況

WebVTTは、IE10以上、Edge、Chrome、Firefox、Safari、Mobile Safari(iOS7.1以上)、Android Browser(Android4.4以上)で対応されています。

このほか、動画配信サービスYouTubeでもWebVTTがサポート*されています。

*注:YouTubeがサポートする字幕ファイル形式

YouTubeがサポートする動画の字幕ファイル形式については、ヘルプのサポートされる字幕ファイルに記載されていますが、WebVTTのファイル形式に対応しています。

WebVTTはあまりメジャーではない技術だと、著者自身は思っていたのですが、思っていたよりも広くサポートされていることに驚きました。

WebVTTの書式

まずは、WebVTTの書式について解説します。WebVTTはテキストファイルとして作成しますが、その中では、次のような項目が指定できます。

  • 字幕の開始時間と終了時間をタイムスタンプで表す
  • 字幕の水平・垂直位置
  • 字幕の書字方向(ltr・rtl)
  • 字幕テキストの装飾など

字幕の位置や書式の方向などについては、次回以降詳しく説明するので、今回はWebVTTの書式を解説します。

シンプルな記述を見てみましょう。

WebVTTの記述例(シンプル)
WEBVTT

NOTE
これはノートです。字幕としては表示されません。

00:00:00.000 --> 00:00:10.000
これはキューテキストです。字幕として表示されます。

NOTE 一行のノートです。字幕としては表示されません。

00:00:10.000 --> 00:00:25.000
そして、これはキューテキストです。字幕として表示されます。

以上を記述したテキストファイルをトラックファイル*と呼び、それを.vtt拡張子を付けてtrack要素で読み込ませると字幕が表示されます。

* 注:トラックファイル

厳密に言うと、トラックファイルにはこの記事で紹介するWebVTT書式(.vttファイル)と、TTML書式(.ttmlファイル)の2種類があります。TTMLファイルに関しては、この記事では触れません。

特にファイルフォーマットについて知らなくても、なんとなくですが、読めるのではないでしょうか。どういった内容で解釈されるのかは、VTTCaptions.comにあるファイルフォーマットについての部分を引用します。

WebVTTファイルの書式(全項目)
WEBVTT [file-description-text]<vttbr>
<vttbr>
[NOTE [<vttbr>][comment-text<vttbr>]]
[cue id<vttbr>]
Start timestamp --> end timestamp [vertical:value] [line:value] [position:value] [size:value] [align:value]<vttbr>
[cue-payload]<vttbr>
<vttbr>
[NOTE [<vttbr>][comment-text<vttbr>]]
[cue-id<vttbr>]
Start timestamp --> end timestamp [vertical:value] [line:value] [position:value] [size:value] [align:value]<vttbr>
[cue-payload]<vttbr>
<vttbr>
...etc

どういったフォーマットで解釈されるかを、ひとつずつ解説していきます。

ファイルの先頭の書式

ファイルの先頭
WEBVTT<vttbr>
<vttbr>

まずファイルの先頭はWEBVTTから始める必要があります。次に<vttbr>ですが、これは改行コードを示します(<vttbr>というタグを書くわけではありません)。つまりファイルの先頭はWEBVTTで始め、その行で改行し、次の行でまた改行するということです。

ノートの書式

ノートの書式
[NOTE [<vttbr>][comment-text<vttbr>]]

次にノートです。ノートはコメントです。字幕として表示されません。NOTEで始まり、改行して複数行にすることも、半角スペースを開けて1行で記述することもできます。ただし、複数行に渡ってコメントを書く場合、空白の行は許可されません。

comment-textの部分はコメントテキスト本体です。自由にテキストを記述できますが、-->という文字列は記述することができません。

キューの書式

キューの書式
[cue id<vttbr>]
Start timestamp --> end timestamp [vertical:value] [line:value] [position:value] [size:value] [align:value]<vttbr>
[cue-payload]<vttbr>
<vttbr>

トラックファイルのタイムスタンプとキューテキストの塊の部分をキューと呼びます。キューの前後は空の行で区切ります。必要であれば、キューにID([cue id<vttbr>])を指定することもできます。たとえば、my-cue-id-1などとIDを振ることができます。JavaScriptを使用して、このIDを指定することで、そのキューの内容を取得できます。

各キューでは、開始時間(Start timestamp)と終了時間(end timestamp)を矢印(-->)で区切り、hh:mm:ss.tttもしくはmm:ss.tttの形式*で指定します。必要であれば位置や文字サイズなどを続けて指定します。この装飾部分については、次回解説します。

その次の行にキューのテキスト([cue-payload])を指定します。テキストは自由に記述できます。このテキストは複数行にすることもできますが、空白の行は許可されません。

テキストには、&<>は直接記述することができませんので、記述する場合は&amp;のように実体参照にする必要があります。さらに、HTMLのようにいくつかのタグ(<c>, <v>, <lang>, <b>, <i>, <u>, <HH:MM:SS.sss>, <ruby>)を利用できます。このタグについては次回解説します。

* 注:hh:mm:ss.tttやmm:ss.tttについて

タイムスタンプのフォーマットはどちらかである必要があります。それぞれの意味は次のとおりです。

  • hhは時間(2桁以上)を表します
  • mmは分(00〜59)を表します
  • ssは秒(00〜59)を表します
  • tttはミリ秒(000~999)を表します

トラックファイルの記述例

以上を踏まえて、前述のトラックファイルにキューIDなどを加えました。

WebVTTの記述例(詳細)
WEBVTT

NOTE
これはコメントです。

my-cue-id-1
00:00.000 --> 00:05.000 line:90%
<v げこたん>これは<b>WebVTT</b>による字幕です。

cue-id-2
00:05.000 --> 00:10.000 line:90%
<v soto3>これは<b>WebVTT</b>による字幕です。

cue-3
00:10.000 --> 00:15.000 line:90%
<v.loud げこたん>これはWebVTTによる字幕です。

my-cue-id-1cue-id-2cue-3がキューIDです。キューIDは、このキューの名前ですので、一意なものである必要があります。ここに登場するline:90%<v げこたん>といった装飾については、次回の「字幕を装飾する」で解説していきます。

字幕を読み込む

まずは、テキストファイルとして、これまで解説した記法でトラックファイル(日本語と英語のもの)を作成し、拡張子を.vttとして保存します。それをtrack要素で読み込ませます。

日本語のトラックファイルはmovie-ja.vttとします。内容は次のとおりです。

日本語トラックファイル
WEBVTT

NOTE
日本語用のトラックファイルです。

00:00:00.000 --> 00:00:10.000
<v geckotang>これは<b>キューテキスト</b>です。<ruby>字幕<rt>じまく</ruby>として表示されます。

00:00:10.000 --> 00:00:25.000
<v soto3>そして、これは<b>キューテキスト</b>です。<ruby>字幕<rt>じまく</ruby>として表示されます。

そして、英語のトラックファイルはmovie-en.vttとします。日本語を英訳したものになっています。

英語トラックファイル
WEBVTT

NOTE
This is a track file for English.

00:00:00.000 --> 00:00:15.000
<v geckotang>This is <b>a cue text</b>. This is displayed on this movie for a caption.

00:00:05.000 --> 00:00:15.000
<v soto3>And this is also <b>a cue text</b>. This is also displayed on this movie for a caption.

次に、HTMLを用意します。track要素の属性値などについては、次回以降、解説しますが、src属性に読み込むファイル名、srclang属性に言語名、初期に利用される字幕にはdefault属性を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>WebVTT Demo 6</title>
<style>
.with-caption {
  width: 500px;
  border: 3px solid tomato;
}
.with-caption::cue { font-size: 18px; }
.with-caption::cue(b) { font-size: 24px; }
.with-caption::cue(v[voice="geckotang"]) { color: skyblue; }
.with-caption::cue(v[voice="soto3"]) { color: pink; }
</style>
</head>
<body>
  <video class="with-caption" autoplay controls muted>
    <!-- 読み込む動画ファイルの指定 -->
    <source src="./assets/movie.mp4" type="video/mp4">
    <!-- 読み込む字幕ファイルの指定(日本語) -->
    <track label="日本語" kind="captions" srclang="ja" src="./assets/6/movie-ja.vtt" type="text/vtt" default>
    <!-- 読み込む字幕ファイルの指定(英語) -->
    <track label="English" kind="captions" srclang="en" src="./assets/6/movie-en.vtt" type="text/vtt">
  </video>
</body>
</html>

デモを見てみましょう。

複数のトラックファイルを読み込み、スタイルを当てる

デモにあるvideo要素によるブラウザネイティブの動画プレイヤーは、Chromeではプレイヤーの右下にCCというものがあり、その部分をクリックすると字幕を表示・非表示、どの言語の字幕を表示するかの選択をすることができます。その部分の日本語Englishとなっている部分をクリックすると、字幕を切り替えることができます。

動画のライセンス表示

この記事で使用している動画はCreative Commons Attribution 3.0によってライセンスされています。 © copyright 2008, Blender Foundation / www.bigbuckbunny.org

ここまでのまとめ

今回は、WebVTTの対応状況や基本仕様、動画への読み込みについて解説しました。字幕を表示するタイミングはシビアですので、手書きをしていくものではないとは思います。

実際に利用する際には、短い映像であれば手書きすることも考えられますが、長い映像の場合であれば、映像を見ながら字幕を入力し、トラックファイルが作成できるジェネレータなどが必要になるかもしれません。

次回は、字幕を装飾する書式について解説します。

坂巻 翔大郎
坂巻 翔大郎
フロントエンド・エンジニア

大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。 趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。