動画にチャプターを追加する

チャプターを設定することで、視聴者が動画の特定のポイントに簡単に移動できるようになります。特に長尺の動画において効果的です。動画を手動でスキップする代わりに、チャプターメニューから目的の位置にジャンプできます。

動作サンプル

まずはチャプター付き動画のサンプルを確認してみましょう。以下の動画を再生し、アイコンにマウスオーバーしてチャプターメニューを表示します。

仕組み

チャプター付き動画を実現するには、以下が必要です：

Brightcove プレーヤー（特別なプロパティ、スタイル、プラグインは不要）

動画のチャプターを記述した WebVTT ファイル－例：

WEBVTT
      
      00:00:00.000 --> 00:00:30.000
      Lionfish
      
      00:00:30.000 --> 00:00:54.000
      Anemone
      
      00:00:54.000 --> 00:01:25.000
      Clownfish
      
      00:01:25.000 --> 00:01:54.000
      Sea Horse
      
      00:01:54.000 --> 00:02:23.000
      Crab
      
      00:02:23.000 --> 00:02:35.000
      Dolphins

上記のサンプルでは、各チャプターエントリは以下の 2 行で構成されています：

チャプターの開始・終了時刻（形式：時:分:秒.ミリ秒。例：00:02:23.000）で、厳密に解析されるため、必要に応じてゼロ埋めが必要です。
プレーヤーのチャプターメニューに表示されるチャプタータイトル－プレーンテキストのみがサポートされ、--> の文字列を含めてはいけません。

WebVTT ファイルは、以下の 3 通りの方法で動画に関連付けることができます：

WebVTT ファイルの取り込みドキュメントを参照し、Dynamic Ingest API を使用してアップロードします。
Studio で動画のテキストトラックのプロパティに WebVTT ファイルの URL を追加します。Kind を Chapters に設定してください：

注：default 値はトラックごとではなく、同一言語（srclang）のすべてのトラックに対して true に設定されます。

WebVTT ファイルの URL を <track> タグで in-page 埋め込みコードに記述します：

                  <video-js
                    data-video-id="4426931680001"
                    data-account="1752604059001"
                    data-player="default"
                    data-embed="default"
                    class="video-js" controls>
                        <track src="/assets/webvtt/sea-marvels-chapters.vtt" kind="chapters" label="Chapters" srclang="en">
                  </video-js>
                  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<track> タグを使用して、チャプター用の WebVTT ファイルを in-page 埋め込みコードに追加します：

                  <video-js
                    data-account="3676484086001"
                    data-player="df134dc9-c997-4464-a69c-e36acf59aef7"
                    data-embed="default"
                    class="video-js" controls>
                        <track src="/assets/webvtt/sea-marvels-chapters.vtt" kind="chapters" label="Chapters" srclang="en">
                    </video-js>
                  <script src="https://players.brightcove.net/3676484086001/df134dc9-c997-4464-a69c-e36acf59aef7_default/index.min.js"></script>

以下の図は、WebVTT ファイルからプレーヤーのチャプターメニューがどのように生成されるかを示しています：

プレーヤーの公開

iframe 埋め込みでも in-page 埋め込みでも使用可能で、チャプターは同様に機能します。

.vtt ファイル用の track タグを video タグに追加する必要があるため、チャプター付き動画には in-page 埋め込みを使用してください。

追加のプラグイン、CSS、JavaScript コードは不要です。

制限事項

Media モジュールのプレビュー用プレーヤーではチャプターアイコンが表示されません。チャプターアイコンを確認するには、Web にプレーヤーを公開する必要があります。