|
<track src="vttファイル">で音声や動画に字幕を埋め込むことができます。
|
| 属性 | 説明 |
|---|---|
| kind | キーワード
kind="subtitles"・・・・・・字幕を表示する kind="captions"・・・・・・音が出ない環境のためにテキストを表示する kind="descriptions"・・・・・・動画の説明を表示する kind="chapters"・・・・・・チャプタータイトル kind="metadata"・・・・・・スクリプト用のデータ |
| srclang | テキストトラックの言語 |
| label | トラックのタイトル |
| 属性 | 説明 |
|---|---|
| line | line:50%なら上から50％の位置に表示します |
まずHTML文書には<video src="動画ファイル">～<video>
内にソースタグとトラックタグを記述します。
その後にメモ帳（テキストエディタ）に最初にWEBVTTと記述した後に
以下のような形式でテキストを記述していき
文字コードUTF-8でHPフォルダに保存します。
【ブラウザ表示】
開始時間 --> 終了時間 時間は、時:分:秒.ミリ秒「00:00:00.000」で表します。 下の例では0秒～3秒に一つ目のテキストが出て10秒～14秒に２つ目、 15秒～20秒に3つ目が表示されています（Microsoft Edgeで確認済み）
<video width="300" height="300" preload="none" controls>
<source src="cat.mp4" type="video/mp4">
<track src="jimaku.vtt" kind="subtitles" srclang="ja" label="日本語" default>
</video>
WEBVTT
00:00.000 --> 00:03.000
ネコがいます
00:10.000 --> 00:14.000 line:80%
毛づくろいをしています。
00:15.000 --> 00:20.000 line:80%
この後、雨が降るかもしれません。
