備忘録的プログラミングリファレンス

WebVTT の作成

 WebVTT とは、<video><audio> エレメントといったメディアに付ける字幕や注釈といったテキストトラックのパラメーターを定義する形式のひとつです。
 WebVTT はテキストベースのファイルで作成し、.vttという拡張子で保存します。

WebVTT
WEBVTT

00:00:00.100 --> 00:00:10.000
このトラックは例を示すためのものです。

00:00:10.000 --> 00:00:20.000
動画ありの例は作成していません。

 さらに.vttファイルは、<video><audio> エレメントの中の <track> エレメントにそのファイルの読み込み方法を設定します。

track タグエレメント
<video autoplay muted>
	<track kind="subtitles" src="example.vvt">
	<source src="video.webm"></source>
	<source src="example.mp4"></source>
</video>

 メディアに付け加える字幕や注釈のことをテキストトラックキャプションといったりもします。

ページ内 Index

WebVTT の作成方法について

 WebVTT とは、<video><audio> エレメントといったメディアに付けるテキストトラックを定義するための形式のひとつです。WebVTT はUTF-8のテキストベースのファイルとして作成します。
 WebVTT 形式で作成されたファイルは.vttという拡張子を付け、 <track> エレメントで読み込みます。

 WebVTT 形式でファイルを作成するには、最初の行(ヘッダー)をWEBVTTとします。

ヘッダー
WEBVTT

 ヘッダーの次は以下のように一行を開けてキューを編集します。

WebVTT の定義
WEBVTT

00:00:00.100 --> 00:00:10.000
このキューは例を示すためのものです。

 WEBVTT 以降の時間指定のあるようなエントリをキューと呼びます。

キュー
00:00:00.100 --> 00:00:10.000
このキューは例を示すためのものです。

 字幕や注釈を表示するタイミングは、開始時間と終了時間を --> で示します。この時間指定をタイムマーカーといいます。

タイムマーカー
00:00:00.100 --> 00:00:10.000

 時間は、hh:mm:ss 形式で表します。hh (時)、mm (分)、ss (秒) はスペースのない:で区切ります。
 hh (時)、mm (分)、ss (秒) の整数値は2桁で表します。秒 (ss) のみは小数点以下をピリオド.で表し、1 / 1000 まで定義できます。

 このように作成したテキストをUTF-8形式のファイルとして保存します。

 複数のキューを定義するにはキューごとに一行以上を入れます。空白行が1行以上あるとヘッダーやキュー、コメントの区切りとみなされます。

複数のキュー
WEBVTT

00:00:00.100 --> 00:00:10.000
このトラックは例を示すためのものです。

00:00:10.000 --> 00:00:20.000
動画ありの例は作成していません。

キュー

 字幕や注釈とそのタイミングを示すキューには番号や名称を付けることができます。

キューの番号と名称
WEBVTT

1
00:00:00.100 --> 00:00:10.000
このキューは番号を付けています。

this cue is second
00:00:10.000 --> 00:00:20.000
このキューには名称を付けています。

 これらの番号や名称は CSS の ::cue() 疑似エレメントの引数に利用することができます。

 CSS の ::cue() 疑似エレメントでは以下のようにキューの番号や名称を指定します。

::cue() 疑似エレメント
::cue(#\1){
	color: green;
}

::cue(#this\ cue\ is\ second){
	color: pink;
}

 キューの番号や名称にはコメントアウト文を付けることができます。コメントアウト文を付けるには - に続いてコメントを編集します。

キューの番号と名称
WEBVTT

1 - first cuew
00:00:00.100 --> 00:00:10.000
このキューは番号を付けています。

this cue is second - このキューは2番めです
00:00:10.000 --> 00:00:20.000
このキューには名称を付けています。
	

 このようなコメントアウト文はファイルの内容を閲覧するときには見えますがコードとして実行はされません。

コメントアウト

 ヘッダーのWEBVTT - を加えることでコメントを加えることができます。

複数のキュー
WEBVTT - これはファイルの作成例です

 コメントアウトは、WebVTT では NOTE コマンドを使用します。コメントアウトは空白行が1行以上あることによって区切りとみなされます。

複数のキュー
WEBVTT - これはファイルの作成例です

NOTE
この行はコメントアウトされます。
一行以上の空白行で区切りとみなされます。

00:00:00.100 --> 00:00:10.000
このトラックは例を示すためのものです。

00:00:10.000 --> 00:00:20.000
動画ありの例は作成していません。

 このようなコメントアウトはファイルの内容を閲覧するときには見えますがデータとして実行はされません。ファイルを編集する人が分かりやすくするためや憶えとして付けます。

Example

 WebVTT の例です。<video> エレメントに <track> タグによって WebVTT ファイル.vttを読み込んでいます。

 ::cue() 疑似エレメントによるスタイルシートも作成してあります。

 webVTT ファイル example.vtt は以下のような内容です。

example.vtt
WEBVTT

1
00:00:00.100 --> 00:00:10.000
この動画は Pexelsの arvin latifi による動画です。

2
00:00:10.000 --> 00:00:20.000
この字幕は例として作成したものです。

3
00:00:20.000 --> 00:00:30.000
ファイル形式は WebVTT 「.vtt」です。

 この例の動画は、Pexelsのarvin latifiによる動画を拝借しました。

 ローカルで開発する際の注意点として、.vttといったファイルはセキュリティーの観点から読み込みエラーが出ます。web サーバー経由でページを閲覧する必要があります。