WebVTTを利用した動画字幕 第1回 WebVTTの基本仕様
WebVTTは時系列に沿ったテキスト表示に利用されるデータフォーマットです。WebVTTを利用すれば、video要素を利用した動画に字幕を付けることができます。今回はWebVTTの仕様をじっくり解説します。
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]
)を指定します。テキストは自由に記述できます。このテキストは複数行にすることもできますが、空白の行は許可されません。
テキストには、&
や<
や>
は直接記述することができませんので、記述する場合は&
のように実体参照にする必要があります。さらに、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-1
やcue-id-2
、cue-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の対応状況や基本仕様、動画への読み込みについて解説しました。字幕を表示するタイミングはシビアですので、手書きをしていくものではないとは思います。
実際に利用する際には、短い映像であれば手書きすることも考えられますが、長い映像の場合であれば、映像を見ながら字幕を入力し、トラックファイルが作成できるジェネレータなどが必要になるかもしれません。
次回は、字幕を装飾する書式について解説します。