ビデオへのチャプターマーカーの追加

チャプターマーカーを単一のビデオまたはアダプティブビデオセットに追加することにより、再生時間の長いビデオの閲覧やナビゲートがしやすくなります。ユーザーがビデオを再生するとき、ビデオタイムライン（ビデオスクラバーとも呼ばれる）のチャプターマーカーをクリックすれば、関心のあるポイントに簡単にナビゲートできます。また、新しいコンテンツ、デモ、チュートリアルなどにすぐにアクセスできます。

注意： 使用されるビデオプレーヤーがチャプターマーカーの使用に対応している必要があります。

Universal_HTML5_Video ビューア（HTML5）でのチャプターナビゲーションキューポイントやチャプタータイトルポップアップテキストの設定方法については、 ビデオビューアプリセットの追加または編集 を参照してください。

ビューアプリセットの追加と編集 も参照してください。

必要に応じて、ビデオビューアプリセットを使用する代わりに、チャプターを使用するカスタムビデオビューアを作成し、ブランド化することもできます。チャプターナビゲーションを使用する独自の HTML5 ビューアを作成する手順については、Adobe Scene7 Viewer SDK の Adobe Scene7 Viewer SDK for HTML5 ガイドで、 s7sdk.video.VideoPlayer クラスおよび s7sdk.video.VideoScrubber クラスの「修飾子を使用した動作のカスタマイズ」を参照してください。

Adobe Scene7 Viewer SDK は次の場所でダウンロードできます。

Adobe Developer Connection

ビデオのチャプターリストの作成方法は、キャプションの作成方法とよく似ていて、WebVTT ファイルを作成します。ただし、このファイルは、使用している他の WebVTT キャプションファイルと分ける必要があります。キャプションとチャプターを 1 つの WebVTT ファイルにまとめることはできません。

チャプターナビゲーションを含む WebVTT ファイルを作成する際には、次のサンプルをフォーマット例として使用できます。 

WEBVTT 
Chapter 1 
00:00.000 --> 01:04.364 
The bicycle store behind it all. 
Chapter 2 
01:04.364 --> 02:00.944 
Creative Cloud. 
Chapter 3 
02:00.944 --> 03:02.937 
Ease of management for a working solution. 
Chapter 4 
03:02.937 --> 03:35.000 
Cost-efficient access to rapidly evolving technology.

この例では、 Chapter 1 はキュー識別子（オプション）です。 00:00:000 --> 01:04:364 というキュー時間では、そのチャプターの開始時間と終了時間を「00:00:000」という形式で指定しています。末尾の 3 桁はミリ秒であり、必要に応じて 000 のままにすることができます。 The bicycle store behind it all というチャプタータイトルは、実際にはそのチャプターの内容を示す説明です。キュー識別子、開始キュー時間およびチャプタータイトルはすべて、ビデオプレーヤーでユーザーがビデオのタイムライン内の視覚的なキューポイントにマウスポインターを置いたときにポップアップ表示されます。

HTML5 ビデオビューアを使用しているので、作成するチャプターファイルが WebVTT（Web Video Text Tracks）規格に従っていることを確認してください。チャプターのファイル名拡張子は .vtt です。WebVTT のキャプション規格について、さらに詳しく調べることができます。

WebVTT: The Web Video Text Tracks format を参照してください。

ビデオにチャプターマーカーを追加するには

  1. Scene7 Publishing System の外部でシンプルなテキストエディターを使用して、ビデオチャプターファイルを作成します。

    注意： 英語以外の言語のビデオチャプターをグローバルサポートする場合、WebVTT 規格では、サポートする言語ごとに個別の .vtt ファイルを作成して呼び出す必要があることに注意してください。

  2. チャプタータイトルテキストの文字レンダリングの問題を回避するために、.vtt ファイルを UTF8 エンコーディングで保存します。

    通常、チャプター VTT ファイルにはビデオファイルと同じ名前を指定し、 chapters を付加します。これにより、既存の Web コンテンツ管理システムを使用して、ビデオ URL の生成を自動化できます。

  3. Scene7 Publishing System で、WebVTT チャプターファイルをアップロードします。

    詳しくは、 ファイルのアップロード を参照してください。

  4. 左側のアセットライブラリパネルで、アップロードしたチャプターファイルに関連付けるビデオファイルを含んでいるアセットフォルダーに移動します。

  5. アセットの参照パネルで 1 つのビデオアセットを選択して、アセットのサムネール画像の下にある プレビュー ／ ビューアリスト をクリックします。

  6. ビューアリストの表で、 Univeral_HTML5_Video という名前の HTML5 ビューアを探し、次のいずれかの操作を行います。

    • ポップアップビデオビューアの操作については、名前の最も右側にある 「URL をコピー」 をクリックします。

      コピーしたビデオの URL を次の構文と共に追加し、この URL とコピーしたキャプションファイルの URL を関連付けます。

      &navigation= <full Copy URL path to the chapter navigation file .vtt>

    • 埋め込まれたビデオビューアの操作については、名前の最も右側にある 「埋め込みコード」 をクリックします。

      埋め込みコードダイアログボックスで、 「クリップボードにコピー」 をクリックします。

      HTML5 Universal_HTML5_Video ビューアの場合、コピーした埋め込みコードを次の構文と共に追加します。

      videoViewer.setParam("navigation"," <full Copy URL path to the chapter navigation file .vtt> "