# - 字幕の追加

## 1．字幕について

### (1)字幕に対応する動画形式について

字幕はトピックの動画がYouTube，Wowzaである場合のみ追加できます．

Vimeoの場合，CHIBI-CHILOから字幕を追加することはできませんので，Vimeoの画面で字幕を追加してください．

* [キャプションと字幕 – ヘルプセンター - Vimeo](https://vimeo.zendesk.com/hc/ja/articles/224968828-%E3%82%AD%E3%83%A3%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E5%AD%97%E5%B9%95)

### (2)字幕のファイル形式について

字幕はWebVTT形式のファイルに対応しています．

#### 字幕ファイルのサンプル

最初の行にWEBVTTと記載します．

字幕の表示開始時間と終了時間を `00:01.000 --> 00:05.000` のように書き，その下に字幕のテキストを記載します．

```
WEBVTT

00:01.000 --> 00:05.000
字幕1

00:05.000 --> 00:10.000
字幕2

00:10.000 --> 00:15.000
字幕3
```

詳細は以下の参考URLよりご確認ください．

* <https://www.w3.org/TR/webvtt1/>
* <https://developer.mozilla.org/ja/docs/Web/API/WebVTT_API>

## 2．字幕を追加する

❶トピックの作成・編集時に **\[動画を編集する]** をクリックします． **\[字幕を追加]** ボタンが表示されます．

❷ **\[字幕を追加]** ボタンをクリックします．

❸字幕のアップロード画面が開くので，ファイルと言語を選択し， **\[アップロード]** をクリックします．

<figure><img src="https://3663586847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYoDJ8UIaOsCKwqGFlm%2Fuploads%2Fgit-blob-179592e7374b94d179028fc05f9714865d806bb5%2Ftopic-subtitles_01.png?alt=media" alt=""><figcaption></figcaption></figure>

❹画面下部の「作成」または「保存」をクリックします．

## 3．字幕を削除する

字幕の下に，追加した字幕言語が表示されます．右側の×をクリックすると，字幕が削除されます．

<figure><img src="https://3663586847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYoDJ8UIaOsCKwqGFlm%2Fuploads%2Fgit-blob-7d16121dab5035367a094d7f57e6c6187ce4252c%2Ftopic-subtitles_02.png?alt=media" alt=""><figcaption></figcaption></figure>

## 4．字幕を確認する

❶ブックの作成・編集画面，またはトピック一覧画面からトピックをプレビューします．

<figure><img src="https://3663586847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYoDJ8UIaOsCKwqGFlm%2Fuploads%2Fgit-blob-c7416a4ad47c903a53bc4a27412ca0511062859d%2Ftopic-subtitles_03.png?alt=media" alt=""><figcaption></figcaption></figure>

❷表示される動画の右下に字幕アイコンが表示されますので，クリックして，追加した字幕の言語を選択すると，字幕が表示されます．

<figure><img src="https://3663586847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYoDJ8UIaOsCKwqGFlm%2Fuploads%2Fgit-blob-c44a05073177ba991f860b589e91a82256bc4f71%2Ftopic-subtitles_04.png?alt=media" alt=""><figcaption></figcaption></figure>
