（字幕）HTML5 video および audio 用の Caption

# 種類

W3C によって開発された 2 つの形式があります。

| 種類 |拡張子|MIME type|format|
|---|---|---|---|
|WebVTT|.vtt|text/vtt|UTF-8 plain text
|TTML|.ttml|application/ttml+xml|XML|

## WebVTT
[ W3C>  WebVTT: The Web Video Text Tracks Format](http://www.w3.org/TR/webvtt1/)
### 用途
* HTML5 の track 要素の外部リソース

### 利点
* TTML と比べて相対的に記述量が少ない
* ぱっと見のわかりやすさ

## TTML
[ W3C>  Timed Text Markup Language 1 (TTML1) (Second Edition)](https://www.w3.org/TR/ttaf1-dfxp/)
[ W3C>  Timed Text Markup Language 2 (TTML2)](https://www.w3.org/TR/ttml2/)

### 用途
* HTML5 の track 要素の外部リソース
* [SMIL 3.0](http://www.w3.org/TR/SMIL3/) の text または textstream 要素の外部リソース

### 利点
* XML API を用いてプログラムでファイルを書き換えるなどに適している

## お勧め
HTML5 で外部ファイル利用するなら、WebVTT のほうがシンプルで扱いやすいと思います。
後述しますが、WebVTT ならブラウザでの対応状況も問題ないようです。

### 追記：
そもそも主要な最新ブラウザは track タグで TTML をサポートしていないようなので、WebVTT 一択となりそうです。TTML 利用できるのは IE ぐらいかも。

# 利用方法

HTML5 の video および audio 要素の子要素として track 要素を定義して、その要素から外部リソースとして参照します。今のところ、video 要素だけに用いられることが多いようです。

もちろん、静的な外部リソースとして定義するだけでなく、javascript を使って[動的に追加](https://msdn.microsoft.com/ja-jp/library/dn265043(v=vs.85).aspx)したり、設定されているものを[読み取ったり](http://www.html5rocks.com/ja/tutorials/track/basics/#toc-cues-js)もできます。

# HTML5 track 要素

```html
<video src="foo.ogv">
  <track kind="captions" label="English" src="captions_en.vtt" srclang="en"></track>
  <track kind="captions" label="Japanese" src="captions_jp.vtt" srclang="ja" default></track>
</video>
```

track の src 属性に .vtt や .ttml ファイルを指定します。

## kind 属性値
subtitles、captions、descriptions、chapters、metadata のいずれかを設定可能。

| 定義 |説明|
|---|---|
|subtitles|いわゆる字幕。翻訳字幕としての利用など。|
|captions|字幕 + 説明（発話者、効果音、状況説明）。聴覚障碍者向けなど。|
|descriptions|動画の視覚的な構成説明。|
|chapters|章タイトル。目次ジャンプに利用など。|
|metadata|表示目的ではなく、script から内部的に利用するなど。|

### おまけ＠関連用語

|語句|説明|
|---|---|
|オープンキャプション|誰がいつ見ても字幕が見えるもの、例えばニュースのテロップ等、常にテレビの画面に表示されているもの。|
|クローズドキャプション|必要な人が必要に応じて字幕が見えるもの。機器のリモコンで ON/OFF を切り替えるなど。|



# WebVTT サンプル

## 基礎
```text
WEBVTT

00:01.000 --> 00:05.000
おーい。誰かいませんか？

00:06.000 --> 00:11.000
- 何も返事がありません。
- 誰もいないようです。
```

* WEBVTT で始まる
* 表示開始時間 --> 終了時間
* 1 行以上のテキスト

他にも以下のようなことができます

* css で表示スタイルを変えられます
* 画面には表示されないコメントも書けます
* 表示タイミングはオーバーラップ可能です

## 応用

```text
WEBVTT

1
00:00:05.000 --> 00:00:08.000
<v 太郎>はい、太郎です。</v>

2
00:00:08.000 --> 00:00:13.000 line:63% position:72% align:start
<v 花子>花子です。久しぶり。</v>

3
00:00:13.000 --> 00:00:16.000 line:0 position:20% size:60% align:start
<v 太郎>久しぶり。どうしたの？</v>

4
00:00:16.000 --> 00:00:19.000 vertical:rt line:-1 align:end
<v 花子>来月の同窓会行けそう？</v>

```

* 識別子が付けられます
* 表示場所などのオプションを指定できます（ブラウザ対応はまちまち）
* タグで意味づけできます

![safari.gif](https://qiita-image-store.s3.amazonaws.com/0/30578/d85ad3a9-d341-ed36-f2d3-503e41ae78f8.gif)



# TTML サンプル

```xml

<?xml version='1.0' encoding='UTF-8'?>
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' >
<body>
<div>

<p begin="00:00:01.567" end="00:00:03.987" >こんにちは。</p>
<p begin="00:00:10.098" end="00:00:13.214" >やあ。<br/>久しぶり！</p>
</div>

</body>
</tt>

```

# ブラウザ対応

## WebVTT
WebVTT なら、だいたいどのブラウザでも対応しているようです。
[caniuse > webvtt](http://caniuse.com/#feat=webvtt)
![caniuse_WebVTT.png](https://qiita-image-store.s3.amazonaws.com/0/30578/8e5f04ae-6c28-3128-7205-0c93a742ff05.png)

## TTML
IE10 以降ではサブセット（基本的な情報）を表示できます。
caniuse では、対応状況を確認できなかったこともあり、きちんと調べていません。


# 参考リンク

## 基礎
* [動画や音声に字幕やキャプションを表示しよう &lt;track&gt; ](http://honttoni.blog74.fc2.com/blog-entry-180.html)
* [動画のクローズドキャプションの作りかた](http://website-usability.info/2013/01/entry_130126.html)
* [Microsoft > 字幕メーカーを使った WebVTT ファイルまたは TTML ファイルの作成](https://msdn.microsoft.com/ja-jp/library/jj152136(v=vs.85).aspx)
* [MDN > WebVTT](https://developer.mozilla.org/ja/docs/Web/API/Web_Video_Text_Tracks_Format)
* [MDN > HTML5 videoにキャプションと字幕をつける方法](https://developer.mozilla.org/ja/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video)


## 応用
* [HTML5ROCKS > track 要素の基礎](https://www.html5rocks.com/ja/tutorials/track/basics/)
* [Microsoft > 動的 TextTrack オブジェクト](https://msdn.microsoft.com/ja-jp/library/dn265043(v=vs.85).aspx)
* [W3C > Mapping Between TTML and WebVTT](https://w3c.github.io/ttml-webvtt-mapping/)