サポートに連絡する| システムステータス
ページコンテンツ

    動画のに章を追加する

    このトピックでは、Brightcoveプレーヤー用のチャプタービデオを作成する方法について説明します。
     

    作業サンプル

    チャプタービデオの実用的なサンプルを見てみましょう-以下のビデオを開始し、マウスを上に置きます chapter menu チャプターメニューを表示するアイコン:

    仕組み

    チャプタービデオには以下が必要です。

    • ブライトコーブプレーヤー-特別なプロパティ、スタイリング、プラグインは必要ありません
    • ビデオの章を記述した 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 行で構成されていることに注意してください。

    1. チャプタの開始時刻と終了時刻の形式で、次のようになります。hours:minutes:seconds.milliseconds00:02:23 .000) と厳密に解析されます。必要な場合は、数字をゼロに埋めなければなりません。
    2. プレイヤーチャプターメニューに表示されるチャプタータイトル。プレーンテキストのみがサポートされており、タイトルにサブストリングを含めることはできません。-->

    WebVTT ファイルは、次の 3 つの方法のいずれかでビデオに関連付けることができます。

    1. を使用してWebVTTファイルをアップロードしますWebVTTファイルの取り込みのドキュメント動的取り込みAPI情報。
    2. Studio のビデオのテキストトラックプロパティに WebVTT ファイルの URL を追加します。[詳細設定] Kindにアクセスして、をChapters :
      studio text track settings
    3. <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ファイルからどのように生成されるかを示しています。

    player-vtt-interaction

    プレーヤーの公開

    iframe またはページ内埋め込みのいずれかを使用できます。チャプターは両方で同じように機能します。

    .vtt trackvideoファイルのタグをに追加する必要があるため、チャプタービデオにはページ内埋め込みを使用する必要があります。

    追加のプラグイン、CSS、または JavaScript コードは必要ありません。


    ページの最終更新日28 Sep 2021