動画のに章を追加する
作業サンプル
チャプタービデオの実用的なサンプルを見てみましょう-以下のビデオを開始し、マウスを上に置きます 
チャプターメニューを表示するアイコン:
仕組み
チャプタービデオには以下が必要です。
- ブライトコーブプレーヤー-特別なプロパティ、スタイリング、プラグインは必要ありません
- ビデオの章を記述した 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 行で構成されていることに注意してください。
- チャプタの開始時刻と終了時刻の形式で、次のようになります。
hours:minutes:seconds.milliseconds00:02:23 .000) と厳密に解析されます。必要な場合は、数字をゼロに埋めなければなりません。 - プレイヤーチャプターメニューに表示されるチャプタータイトル。プレーンテキストのみがサポートされており、タイトルにサブストリングを含めることはできません。
-->
WebVTT ファイルは、次の 3 つの方法のいずれかでビデオに関連付けることができます。
- を使用してWebVTTファイルをアップロードしますWebVTTファイルの取り込みのドキュメント動的取り込みAPI情報。
- Studio のビデオのテキストトラックプロパティに WebVTT ファイルの URL を追加します。[詳細設定]
Kindにアクセスして、をChapters:
<track>タグ内の WebVTT ファイルの URL をページ内埋め込みコードに参照します。<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 ファイルをページ内埋め込みコードに追加します。
<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 またはページ内埋め込みのいずれかを使用できます。チャプターは両方で同じように機能します。
.vtt trackvideoファイルのタグをに追加する必要があるため、チャプタービデオにはページ内埋め込みを使用する必要があります。
追加のプラグイン、CSS、または JavaScript コードは必要ありません。