WebVTT の作成
WebVTT とは、<video> や <audio> エレメントといったメディアに付ける字幕や注釈といったテキストトラックを定義する形式のひとつです。
WebVTT はテキストベースのファイルで作成し、.vtt
という拡張子で保存します。
WEBVTT 00:00:00.100 --> 00:00:10.000 このトラックは例を示すためのものです。 00:00:10.000 --> 00:00:20.000 動画ありの例は作成していません。
さらに.vtt
ファイルは、video や audio タグエレメントの中の track タグエレメントにそのファイルの読み込み方法を設定します。
<video autoplay muted>
<track kind="subtitles" src="example.vvt">
<source src="video.webm"></source>
<source src="example.mp4"></source>
</video>
メディアに付け加える字幕や注釈のことをテキストトラック
やキャプション
といったりもします。
制作における注意点として、WebVTT ファイルによるテキストトラックは web サーバーからのページ読み込みの場合に機能します。
ページ内 Index
WebVTT の作成方法について
WebVTT とは、<video> や <audio> エレメントといったメディアに付けるテキストトラックを定義するための形式のひとつです。WebVTT はUTF-8
のテキストベースのファイルとして作成します。
WebVTT 形式で作成されたファイルは.vtt
という拡張子を付け、 <track> エレメントで読み込みます。
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(#\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 の例です。WebVTT とは、動画や音声に付けるテキストトラックを定義するための形式のひとつです。WebVTT はUTF-8
のテキストベースのファイルとして作成します。
以下の例では、<video> エレメントに <track> タグによって WebVTT ファイル.vtt
を読み込んでいます。
::cue() 疑似エレメントによるスタイルシートも作成してあります。
webVTT ファイル 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 サーバー経由でページを閲覧する必要があります。