Show Menu
トピック×

インタラクティブビデオ

ビデオから直接コンバージョンを促すインタラクティブビデオを簡単に作成できます。ビデオに対する顧客のエンゲージメントは、ビデオプレーヤーと一緒に表示されるパネルでおこなわれます。パネルをスクロールすると、ビデオの内容に応じて、関連するサービス、情報、製品サムネールを表示できます。サムネールをタップすると、サービスに直接アクセスしたり、買い物かごに商品を追加してすぐに購入したり、詳細が記載されている Web ページにアクセスしたりできます。
ビデオが終了すると、コールトゥアクションを促すために、画像を使用して、すべてのサービスの概要が表示されます。顧客は、ここで欲しい商品をタップすることもできます。こうしたすぐに行動に移すことができる具体的なエクスペリエンスが顧客のエンゲージメントとコンバージョンを促します。
インタラクティブ画像 も参照してください。

インタラクティブビデオの使用例

To see an interactive, shoppable video in action, click Live Demos , scroll to the Shoppable Media heading on the page, then click the shoppable video.
  • 再生中にビデオ内で製品が使用されると、同じ製品のサムネール画像が右側に表示されます。
  • サムネールをクリックするとビデオが一時停止され、その製品のクイックビューが開きます。例えば、ビデオ内でKitchenAidサムネール画像をクリックして、ミキサーの360度スピンビューを表示したり、ズームインしてミキサーの詳細を表示したりできます。
​インタラクティブな買い物が可能なビデオのビデオフレームキャプチャ。
ユーザーがサムネール画像をクリックすると Web ページを開くようにインタラクティブビデオを作成した場合、一部のデバイスでは、ポップアップ Web ページがブロックされて開きません。そのようなケースでは、デバイスのポップアップブロック機能の設定を変更する必要があります。For example, on an Apple iPhone 6, tap [Settings > Safari > Block Pop-ups , then slide the control to [Off . こうすると、インタラクティブビデオを再生してサムネールをクリックしたときに、ポップアップを開くかどうかを確認するメッセージが表示されます。同意すると Web ページが開きます。

インタラクティブビデオの作成方法を見る

インタラクティブビデオの作成方法 outv.omniture.com?v=s4NHQ2dzqd7hIqWjeG2sIdyNWsTWyupAを示す 7 分 30 秒のガイドをご覧ください。 (このビデオガイドの対象は Assets on Demand ですが、原則や手順は AEM Assets のインタラクティブビデオにも対応しています。)

アドビカスタマーサクセスウェビナー

「AEM Assets でのインタラクティブビデオの使用、リンク共有および YouTube での共有」ウェビナーでは、インタラクティブビデオなどの機能を使用して、コンバージョン誘導イベントをビデオマーケティングコンテンツと連動させる方法を解説しています。

クイックスタート:インタラクティブビデオ

次のワークフローの手順説明は、Dynamic Media 内のインタラクティブビデオをすぐに使い始めることを目的としたものです。
一部のクイックスタートタスク内には「 」という見出しがあります。これには、まだインタラクティビティが追加されて​ いない ​次の開始デモ Web ページに基づく、簡単なチュートリアルが含まれています。
」では、Web サイトにインタラクティブビデオを統合する手順が説明されています。
最後の「例」節のチュートリアルを完了すると、完全に統合されたインタラクティブビデオを含む最終的なデモ Web ページは、次のようになります。
インタラクティブビデオワークフロー :
  1. (オプション)クイックビュー変数の特定 - まず、既存のクイックビュー実装で使用される動的変数を特定します。これらの変数を使用して、インタラクティブビデオを作成するときに、製品のサムネールを対応する製品のクイックビューにマッピングします。 (オプション)クイックビュー変数の特定 を参照してください。
    この手順は、次のすべてが真の場合にのみ必要です
    • クイックビューをトリガーして、ビデオにインタラクティブ機能を追加する。
    • eCommerce ソリューション(IBM Websphere Commerce、Elastic Path、hybris、Intershop など)から AEM に製品データを取り出すために、AEM の実装が​** eCommerce 統合フレームワークを使用していない。 AEM Assets での eCommerce の概念 を参照してください。
  2. (Optional)インタラクティブビデオのビューアプリセットの作成 - プレーヤーを構成する様々なコンポーネント(ビデオスクラバーやインタラクティブサムネールなど)の外観と動作をカスタマイズします。
    Creating your own Interactive Video viewer preset is not required if you intend to use the out-of-the-box Interactive Video viewer presets Shoppable_Video_Light or Shoppable_Video_Dark instead. 新しいビューアプリセットの作成 (これはオプション)と インタラクティブビューアプリセットの作成に関する注意事項 を参照してください。
  3. ビデオおよび関連する画像アセットのアップロード - インタラクティブにするビデオと関連する画像をアップロードします。
  4. ビデオへのインタラクティビティの追加 - ビデオに 1 つ以上の時間セグメントを追加します。次に、それらの時間セグメント内で画像サムネールを関連付けます。各画像サムネールを、ハイパーリンク、クイックビュー、エクスペリエンスフラグメントなどのアクションに割り当てます。
    (インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません)。
    インタラクティブビデオアセットを公開して作業は完了です。公開すると、最終的にコピーして Web サイトのランディングページ適用する、埋め込みコードまたは URL が作成されます。 ビデオへのインタラクティビティの追加 を参照してください。
    アセットの公開 を参照してください。
  5. WebサイトまたはAEMのWebサイトへのインタラクティブビデオの追加
    AEMサイト、AEM eCommerceまたはその両方を使用する場合は、Interactive mediaコンポーネントをページにドラッグして、インタラクティブビデオをAEMのWebページに直接追加できます。 See Adding Dynamic Media Assets to Pages.
    を参照してください。 埋め込みコードまたは URL を使用して、インタラクティブビデオを Web サイトエクスペリエンスに統合します。 インタラクティブビデオの Web サイトへの統合 を参照してください。
    サードパーティの WCM(Web Content Manager)を使用している場合は、新しいインタラクティブビデオを、Web サイトで使用されている既存のクイックビュー実装に統合する必要があります。 インタラクティブビデオの既存のクイックビューへの統合 を参照してください。

(オプション)クイックビュー変数の特定

このタスクが必要になるのは次に該当する場合のみです。
  • クイックビューをトリガーして、ビデオにインタラクティブ機能を追加する。
  • eCommerce ソリューション(IBM Websphere Commerce、Elastic Path、hybris、Intershop など)から AEM に製品データを取り出すために、AEM の実装が​** eCommerce 統合フレームワークを使用していない。 AEM Assets での eCommerce の概念 を参照してください。
AEM の実装が eCommerce を使用している場合は、このタスクをスキップして次のタスクに進みます。
最初に、インタラクティブビデオの作成プロセス中に製品サムネールを対応する製品クイックビューにマッピングできるように、既存のクイックビューの実装で使用している動的変数を特定します。
ビデオに時間セグメントを追加する際に、セグメントに追加する各サムネールに SKU と任意の追加の変数を割り当てます。こうした変数は、適切な製品クイックビューを表示するために後で使用されます。
製品クイックビューを一意にトリガーするために必要な変数を適切に特定することが重要です。
既存のクイックビューの実装を担当している IT 担当者に問い合わせれば済むこともあります。IT 担当者はおそらく、システム内のクイックビューを特定するために必要な最小限のデータセットを把握しています。ただし、ほとんどの場合は、フロントエンドコードの既存の動作を分析するだけでもかまいません。
クイックビュー実装の大部分では、次の枠組みが使用されています。
  • ユーザーは Web サイト上の特定のユーザーインターフェイス要素をアクティベートします。For example, clicking a Quickview button.
  • Web サイトでは、必要に応じて、クイックビューのデータまたはコンテンツを読み込むための Ajax リクエストをバックエンドに送信します。
  • クイックビューのデータは、Web ページでのレンダリングに備えて、コンテンツに変換されます。
  • 最後に、フロントエンドコードによってそのコンテンツが画面上に視覚的にレンダリングされます。
そのため、このアプローチでは、クイックビューが実装されている既存の Web サイトの様々な部分にアクセスし、クイックビューをトリガーして、クイックビューのデータまたはコンテンツを読み込むために Web ページから送信された Ajax URL をキャプチャします。
通常、専門のデバッグツールを使用する必要はありません。最新の Web ブラウザーには、十分なタスクを実行できる Web インスペクターが備わっています。Web インスペクターが搭載されている Web ブラウザーの例を次に示します。
  • To see all outgoing HTTP requests in Google Chrome, use keyboard shortcut F12 (Windows) or Command + Options + I (Mac) to open the Developer Tools panel, and then click the Network tab.
  • In Mozilla Firefox, you can either activate the Firebug plug-in by using keyboard shortcut F12 (Windows) or Command + Options + I (Mac) and use its Net tab, or you can use the built-in Inspector tool and its Network tab.
  • Internet Explorer では、 F12 キーを押してデバッガーツールをアクティベートします。
ブラウザーでネットワーク監視をオンにして、ページ上でクイックビューをトリガーします。
次に、ネットワークログ内でクイックビューの·Ajax·URL·を見つけ、記録された·URL·を今後の分析のためにコピーします。クイックビューをトリガーするとほとんどの場合、大量のリクエストがサーバーに送信されます。クイックビューの·Ajax·URL·は通常、そのリスト内の最初のほうにあります。It has either a complex query string portion or path, and its response MIME type is either text/html , text/xml , or text/javascript .
このプロセスの実行中は、様々な製品カテゴリーや製品タイプが含まれる Web サイトの様々な領域にアクセスすることが重要です。なぜなら、クイックビュー URL には、ある特定の Web サイトカテゴリーに共通するが、Web サイトの異なる領域にアクセスした場合にのみ変化する部分が存在する場合があるからです。
単純なケースでは、クイックビュー URL 内で変化する唯一の部分が製品 SKU となります。この場合、AEM でサムネールをインタラクティブビデオの時間セグメントに追加するのに必要なデータは製品の SKU 値のみです。
一方、複雑なケースでは、クイックビュー URL に製品 SKU 以外の様々な要素が含まれます(カテゴリー ID、カラーコードなど)。その場合は、それぞれの要素が AEM のサムネールデータ定義で個別の変数になります。
次のクイックビュー URL の例と、その結果となるサムネールの変数について見てみましょう。
単一の SKU(クエリ文字列内)
記録されたクイックビューの URL:
  • https://server/json?productId=866558&source=100
  • https://server/json?productId=1196184&source=100
  • https://server/json?productId=1081492&source=100
  • https://server/json?productId=1898294&source=100
The only variable part in the URL is the value of the productId= query string parameter, and it is clearly a SKU value. Therefore, our thumbnails only need SKU fields populated with values like 866558 , 1196184 , 1081492 , 1898294 .
単一の SKU(URL パス内)
記録されたクイックビューの URL:
  • https://server/product/6422350843
  • https://server/product/1607745002
  • https://server/product/0086724882
The variable part is in the last portion of the path, and it becomes the SKU value of AEM thumbnails: 6422350843 , 1607745002 , 0086724882 .
SKU とカテゴリー ID(クエリ文字列内)
記録されたクイックビューの URL:
  • https://server/quickView/product/?category=1100004&prodId=305466
  • https://server/quickView/product/?category=1100004&prodId=310181
  • https://server/quickView/product/?category=1740148&prodId=308706
この場合、URLには2つの異なる部分があります。 The SKU is stored in the prodId parameter and the category ID is stored in the category= parameter.
そのため、サムネール定義はペアになります。つまり、SKU 値と、 categoryId という追加の変数です。結果のペアは次のようになります。
  • SKU is 305466 and categoryId is 1100004
  • SKU is 310181 and categoryId is 1100004
  • SKU is 308706 and categoryId is 1740148
When the above approach is applied to our Example website, we have a web page with a number of product thumbnails, each having a SEE MORE button:
そのページのすべての製品のクイックビューをアクティベートすると、バックエンドに対して次のリストのクイックビューリクエストが作成されます。
  • datafeed/candles-233396346.json
  • datafeed/candles-233978050.json
  • datafeed/candles-234024346.json
  • datafeed/candles-234024356.json
  • datafeed/candles-234024359.json
  • datafeed/cushions-233939848.json
  • datafeed/cushions-234019477.json
  • datafeed/cushions-234019483.json
  • datafeed/furniture-231747479.json
  • datafeed/furniture-232625621.json
  • datafeed/furniture-232625626.json
  • datafeed/furniture-233939810.json
  • datafeed/furniture-233939825.json
  • datafeed/furniture-233939828.json
  • datafeed/furniture-233939853.json
  • datafeed/furniture-233940334.json
  • datafeed/glassware-000064007.json
  • datafeed/glassware-230722193.json
  • datafeed/glassware-233916550.json
  • datafeed/glassware-233916597.json
これらのサーバーコールを見ると、製品固有の情報がリクエストパスのみに含まれることがわかります。また、クエリ文字列がまったく使用されていないこと、2 つの異なるタイプのデータが含まれることもわかります。
  • 最初のタイプは、candles、cushions、furniture、glassware です。これは「製品カテゴリー」と呼ばれます。
  • 2 つ目のタイプは製品コード(233916597 など)です。これは「製品 SKU」と考えることができます。
この情報に基づいて、全体的なクイックビュー URL は次のようなパターンであることがわかります。
/datafeed/$categoryId$-$SKU$.json
こうした分析に基づいて、サムネールには categoryId SKU の 2 つの変数を使用できるという結論が得られます。
これで、ビデオおよび関連するサムネールアセットをアップロードできます。

(オプション)インタラクティブビデオのビューアプリセットの作成

デフォルトの標準提供インタラクティブビデオビューアプリセットタイプ( Shoppable_Video_dark または Shoppable_Video_light )を使用する予定がある場合は、このタスクをスキップして次に進むことができます。
When a thumbnail is clicked in the authoring environment a preview of the Quickview dialog box appears.
オプションで、インタラクティブビデオの独自のカスタムビューアプリセットを作成することもできます。特に、ビデオプレーヤーのスタイル設定、インタラクティブサムネールおよびビデオの最後に表示されるサムネールのグリッドビューを決定できます。
インタラクティブビデオのビューアプリセットにより、ビデオとユーザーが追加したすべてのセグメントが正しくレンダリングされます。It also uses an example default Quickview when you click a product thumbnail in Preview mode so you can test its interactivity before publishing.
ビューアプリセットを保存すると、ビューアプリセットページでそのプリセットのステータスが自動的に​ オン ​に設定されます。このステータスは、そのプリセットが Dynamic Media コンポーネントに表示され、ビデオのプレビュー時に必ず使用されることを意味します。 ​また、新しいビューアプリセットも忘れずに手動で公開してください。
新しいビューアプリセットの作成 を参照して、独自のインタラクティブビデオのビューアプリセットを作成します。

ビデオおよび関連するサムネールアセットのアップロード

If you have already uploaded your video and thumbnail assets, proceed to Adding interactivity to your video .
誤ったビデオや画像をアップロードした場合、または必要でなくなったアップロード済みビデオや画像を削除したい場合は、 アセットの削除 を参照してください。
ビデオと関連するサムネールアセットをアップロードするには :
  1. 目的の 1 つ以上のフォルダーにビデオおよび関連するサムネールアセットをアップロードします。
    アセットのアップロード を参照してください。
    これで、ビデオにインタラクティビティを追加できます。

ビデオへのインタラクティビティの追加

「インタラクティブビデオを作成」ページで、インプレース Visual Editor を使用してビデオにタイムラインセグメントを追加します。
タイムラインセグメントを追加した後、各セグメントにサムネール画像を追加します。追加した各サムネールにアクションを適用します。例えば、サムネールにクイックビューを適用したり、サムネールにハイパーリンクやエクスペリエンスフラグメントを割り当てたりできます。
エクスペリエンスフラグメント を参照してください。
インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
元に戻す / やり直し (Redo)オプションは、ページの右上隅近くにあり、現在の作成/編集セッション中にサポートされます。
インタラクティブビデオを保存すると、ビデオが直ちにプレビュー用に開かれます。ここから、インタラクティブビデオビューアのプリセットを選択し、ビデオを再生して、顧客に対してビデオがどのように表示されるかをおおよそ確認できます。
ビデオにインタラクティブ機能を追加するには :
  1. アセットビューで、インタラクティブにするアップロード済みのビデオに移動します。
  2. 次のいずれかの操作をおこないます。
    • Hover on the image, then tap Select (checkmark icon). ツールバーの「 編集 」をタップします。
    • 画像の上にマウスポインターを置き、 その他のアクション (3 つのドットのアイコン)/ 編集 ​をタップします。
    • 画像をタップして、詳細ビューページで画像を開きます。ツールバーの「 編集 」をタップします。
  3. On the Create Interactive Video page, do any one of the following:
    • 再生 ​ボタンをタップしてビデオの再生を開始します。取り上げたい特定の製品、サービスまたは詳細が表示されたら、ツールバーの「 セグメントを追加 」をタップします。ビデオの最後に達するまで繰り返します。
      追加した各時間セグメントに 1 つ以上のサムネール画像を割り当て、それらのサムネールを、顧客が購入するためのクイックビュー製品ページや詳細情報のための Web ページにリンクできます。
    • 「再生」ボタン をタップし 、ビデオの再生を開始します。強調表示する特定の製品、サービスまたは詳細が表示されたら、「一時停止」をタップし ます 。「セグメント を追加」をタップしま ​す。
      ビデオの最後に到達するまで、セグメントを追加するタイムライン上のポイントで、ビデオの再生と一時停止を続けます。
  4. (オプション) タイムラインスケールスライダー ​のバーを左にドラッグしてズームインするか、右にドラッグしてズームアウトし、追加したセグメントの表示レベルを制御します。
    Depending on the length of your video, the Segment Duration defaults to the following values:
    ビデオの長さ 「セグメントの期間」のデフォルト値
    3 分以上 60 秒
    2 ~ 3 分 30 秒
    1 ~ 2 分 20 秒
    30 ~ 60 秒 10 秒
    30 秒以下 5 秒
    ビデオのタイムラインは、使用できる最大限の画面領域を使用します。つまり、ブラウザーのサイズを変更しても、追加したセグメントは適切な幅を維持します。
    説明するために、次の 3 つのスクリーンショットでは同じビデオを使用しています。Notice that the width of each segment changes depending on the Timeline Scale setting.
    スクリーンショット A
    上のスクリーンショット A は 29 秒の製品ビデオのデフォルト表示です。The Timeline Scale is set at the default of 5 seconds.
    スクリーンショット B
    In Screenshot B above, the Timeline Scale slider was dragged from the default of 5 seconds to 3 seconds. Notice that the individual Timeline Scale time stamps are now all set at 3 second intervals.
    スクリーンショット C
    In Screenshot C above, the Timeline Scale setting was moved to 8 seconds. 製品サムネールを含むセグメントの表示が縮小されていることに注意してください。このような縮小表示が役立つのは、ビデオが長く、通常はページの幅に収まらないセグメントの概要を確認する場合です。
  5. (オプション)次のいずれかの操作をおこないます。
    • セグメントの開始時刻と終了時刻を調整します。
      セグメントを選択し、先頭または末尾の青い楕円形をドラッグして、開始時刻または終了時刻をそれぞれ調整します。表示されるビデオフレームは、調整に応じて、ビデオ内の対応する時刻に移動します。タイムラインセグメントの移動は、タイムライン内の隣接するセグメントに基づいて制限されます。調整できる最小セグメント時間は 1 秒です。
      次のナビゲーションショートカットを使用すると、ビデオのセグメントを簡単にチェックして微調整することができます。
      • セグメントの先頭に直接移動するには、先頭の青い楕円をタップします。
      • セグメントの末尾に直接移動するには、末尾の青い楕円をタップします。
      • セグメントの先頭からビデオを再生するには、セグメント全体をタップします。
    タイムラインセグメントの末尾の再配置
    • セグメントを削除するには
      Select the last segment that is on the timeline, then on the toolbar, tap Delete Segment . If two or more segments are selected, the Delete Segment feature is disabled.
      削除できるのは最後のセグメントのみです。例えば、タイムライン上のすべてのセグメントを削除したい場合、常に最後のセグメントを選択して「 セグメントを削除 」をタップします。
  6. 1 つまたは複数のサムネール画像を関連付ける時間セグメントを選択します。
  7. ビデオの右側にある「 コンテンツ 」タブをタップします。
  8. Under the Content tab, tap Select Assets , then browse and select all the image assets that you want to use with your video. The selected assets are added to the Asset Selector panel in the Content tab.
  9. 「コンテンツ」タブの下にあるアセットセレクターで、次のいずれかの操作をおこないます。
    選択したタイムラインセグメントにサムネールを関連付けるには
    右側のアセットセレクターパネルで画像をタップします。
    1 つのタイムラインセグメントに好きなだけサムネールを追加できます。選択した各画像について、アセットセレクターの画像の上にチェックマークが表示されます。
    選択したタイムラインセグメントからサムネールを削除するには
    次のいずれかの操作をおこないます。
    • アセットセレクターパネルで、チェックマークの付いている画像をタップして選択を解除します。画像アセットがタイムラインセグメントから削除されます。
    • 選択したタイムラインセグメントで、画像をタップし、ツールバーの「 製品を削除 」をタップします。
    アセットセレクターパネルで画像をタップすると、選択したタイムラインセグメントにその画像が追加されます。
  10. 1 つのタイムラインセグメント内のサムネール画像を 1 つ選択し、「 アクション 」タブをタップします。
  11. 次のいずれかの操作をおこないます。
    選択したサムネール画像をクイックビューに関連付けるには
    「アクションタイプ」の下で「 クイックビュー 」をタップします。
    AEM Sites または Ecommerce のユーザーである場合:
    • 「SKU 値」テキストフィールドには、選択した製品の SKU(Stock Keeping Unit)が既に設定されています。SKU は、提供している製品またはサービスごとの一意の識別子です。これは、AEM Commerce で画像が製品に関連付けられると自動的に設定されます。
    • 設定済みの SKU が正しくない場合は、製品ピッカーアイコン(虫眼鏡)をタップまたはクリックして製品を選択ページを開きます。使用する製品をタップまたはクリックしてから、ページの右上隅のチェックマークをタップして、インタラクティブビデオエディターに戻ります。
    If you are not an AEM Sites or Ecommerce customer
    • ホットスポットの変数の識別 を参照してください。これらの変数を定義する必要があります。
    • デフォルトでは、この SKU フィールドでは画像アセットのファイル名を拡張子を付けずに使用します。SKU に基づいたファイルの名前が標準命名規則に従っている場合、特に編集する必要はありません。
    • それ以外の場合は、デフォルト値を編集して、正しい SKU 値を入力します。「SKU値」テキストフィールドに、製品のSKU(在庫保管単位)を入力します。これは、提供する個々の製品またはサービスの一意の識別子です。 入力したSKU値によって、Quickviewテンプレートの可変部分が自動的に設定され、タップされた画像が特定のSKUのQuickviewに関連付けられます。
    (Optional) If there are other variables within the Quickview that you need to use to further identify a product, tap Add Generic Variable . テキストフィールドで、追加の変数を指定します。 例えば、追加の変数として category=Womens などと指定します。
    選択したサムネール画像をハイパーリンクに関連付けるには
    「アクションタイプ」の下の「 ハイパーリンク 」をタップして、次のいずれかを実行します。
    • AEM Sites のユーザーである場合は、サイトセレクターアイコン(フォルダー)をタップして Web ページに移動します。インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
    • スタンドアロンの Dynamic Media ユーザーである場合は、「HREF」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。
    このリンクを新しいブラウザータブで開くか現在のタブで開くかを指定してください。
    選択したサムネール画像をエクスペリエンスフラグメントに関連付けるには
    「アクションタイプ」の下の「 エクスペリエンスフラグメント 」をタップし、次のいずれかを実行します。
    • AEM Sites のユーザーである場合は、検索アイコン(虫眼鏡)をタップまたはクリックしてエクスペリエンスフラグメントページを開きます。エクスペリエンスフラグメントをタップまたはクリックし、ページの右上隅にある「 選択 」をタップして、前のページのアクションパネルに戻ります。 エクスペリエンスフラグメント を参照してください。
    • エクスペリエンスフラグメントがビデオの上に表示されるときの幅と高さを指定します。
    注意 :インタラクティブビデオのソーシャルメディア共有ツールは、ビューアをエクスペリエンスフラグメントに埋め込む場合はサポートされないことに注意してください。 この問題を回避するには、ソーシャルメディア共有ツールを備えていないビューアプリセットを使用または作成します。 このようなビューアプリセットを使用すると、エクスペリエンスフラグメントに正常に埋め込むことができます。
    サムネール画像に既に割り当てられているアクションを編集するには タイムラインセグメント内で、テキストラベルの右側にチェーンリンクが表示されているサムネール画像をタップします。チェーンリンクは、アクションが割り当てられていることを示します。「 アクション 」タブをタップして、変更をおこないます。
    サムネール画像のテキストラベルを変更するには
    初期設定では、テキストラベルはサムネール画像のメタデータフィールドを Title 使用します。 がな Title い場合は、サムネール画像のファイル名が代わりに使用されますが、拡張子は付きません。
    サムネール画像のテキストラベルを変更するには、「 アクション 」タブで、表示される画像アセットのすぐ下に目的のテキストを入力します。下の図を参照してください。
    新しいテキストラベルが、ビデオプレーヤー自体と、タイムラインセグメントに表示されているサムネールテキストでのみ使用されていることに注目してください。ラベルの変更は、サムネール画像のタイトルメタデータフィールドとファイル名には影響しません。
    加えた変更を元に戻すには ページの右上隅にある「 取り消し 」または「 元に戻す 」をタップします。
    新しいテキストラベルがサムネール画像に追加されています。
  12. 次のいずれかの操作をおこないます。
    • 手順 6~11 を繰り返して、ビデオのタイムラインセグメントに複数のサムネール画像を追加します。
    • オプションの手順 13 をおこないます。
  13. (オプション)次のいずれかの操作をおこないます。
    • セグメントを統合 ‐ 2 つの隣接したセグメントを(製品サムネールが割り当てられているものも割り当てられていないものも)1 つのセグメントに統合できます。
      タイムライン上で、1 つのセグメントに統合する 2 つ以上の連続したセグメントをタップします。下の図では 2 つの選択したセグメントに青い楕円形のドラッグハンドルが表示されていなことに留意してください。
      Tap Merge Segment on the toolbar.
    選択した 5 秒のセグメント 2 つを 10 秒のセグメント 1 つに統合。
    • セグメントを分割 ‐ 1 つのセグメントを 2 つの均等な長さのセグメントに分割できます。セグメントに製品サムネールが割り当てられている場合、サムネールは左のセグメントに組み込まれます。
      On the timeline, tap a segment you want to divide in half, then tap Split Segment on the toolbar.
      Selecting two or more segments disables the Split Segment feature.
    選択した 10 秒のセグメントを 5 秒ずつのセグメント 2 つに分割。
  14. Near the upper-right corner of the Create Interactive Video page, the name of the currently selected viewer preset used with the video is displayed. その名前をタップして別のビューアプリセットを選択します。
    例えば、 Shoppable_Video_light ビューアプリセットでは、ビデオが再生されるときに横に白い表示領域が現れます。この表示領域には、クリック可能なサムネール画像が再生中に表示されます。 Shoppable_Video_dark ビューアプリセットでは、ビデオが再生されるときに横に黒い表示領域が現れます。
    独自のインタラクティブビデオビューアプリセットを作成した場合は、選択できるプリセットのリストにもそのプリセットが表示されます。
    完了したら、「 保存 」をタップします。
    インタラクティブビデオを保存すると、関連付けられた .vtt ファイルも自動的に保存されます。 .vtt ファイルは、 Assets のルートにある _VTT フォルダーに保存されます。インタラクティブビデオを Web サイト上で正しく再生するには、ファイルとフォルダーが必要です。したがって、 _VTT フォルダーやそのフォルダーのコンテンツを移動、編集、削除しないでください。
  15. インタラクティブビデオを公開します。公開すると、最終的にコピーして Web サイトに貼り付ける埋め込みコードまたは URL が作成されます。
    クイックビューを使用したインタラクティビティを追加した場合は、埋め込みコードのみを使用します。ハイパーリンクされた Web ページを使用したインタラクティビティを追加した場合は、公開された URL を使用することもできます。ただし、インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
    アセットの公開 を参照してください。
    クイックビューを含むショッパブルビデオを公開するには、ビデオに関連する各画像アセットをコマース領域から個別に公開してください。
    タイムラインセグメントを追加し、インタラクティブビデオを公開したので、既存の Web サイトのランディングページにビデオを追加する準備が整いました。 インタラクティブビデオの Web サイトへの統合 を参照してください。

インタラクティブビデオアセットの公開

インタラクティブビデオアセットの公開方法について詳しくは、 アセットの公開 を参照してください。

インタラクティブビデオの Web サイトへの統合

ビデオをアップロードし、タイムラインセグメントを追加して、インタラクティブビデオを公開したら、既存の Web サイトにビデオを追加する準備は完了です。
AEM Sites のユーザーである場合は、インタラクティブメディアコンポーネントをページにドラッグすることによりインタラクティブビデオを追加できます。See Adding Dynamic Media Assets to Pages.
スタンドアロン AEM Assets のユーザーである場合は、この節で説明するようにインタラクティブビデオを手動で Web サイトに追加できます。
インタラクティブビデオをWebサイトに統合するには :
  1. 公開したインタラクティブビデオの埋め込みコードまたはURLをコピーします。
    クイックビューを使用したインタラクティビティを追加した場合は、埋め込みコードのみを使用します。ハイパーリンクされた Web ページを使用したインタラクティビティを追加した場合は、公開された URL を使用することもできます。ただし、インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
  2. ターゲットの Web ページのコードで、静的なビデオの場所を特定します。
  3. 静的ビデオを削除し、コードをそのままAEM Assetsからコピーした埋め込みコードまたは埋め込みURLに置き換えます。
    コピーされた埋め込みコードは、レスポンシブ環境用に設定され、以前静的ビデオが占めていた領域が自動的に収まるようになります。
そのため、ハイパーリンクされた Web ページのみを使用したインタラクティビティを追加した場合は、これで完了です。 一方、クイックビューをトリガーするインタラクティビティを追加した場合は、インタラクティブビデオの隣のサムネールは表示専用であり、まだ既存のクイックビューと統合されていません。そのような場合は、インタラクティブビデオを Web サイトの既存のクイックビューと統合する必要があります。
次のデモ Web サイトを例として使用します。
次に示すのは標準のビデオ埋め込みコードです。
<style type="text/css">
 #s7video_div.s7videoviewer{
   width:100%; 
   height:auto;
 }
</style>

<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
 var s7videoviewer = new s7viewers.VideoViewer({
  "containerId" : "s7video_div",
  "params" : { 
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/", 
   "config" : "/etc/dam/presets/viewer/Video",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "posterimage": "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 }).init();
</script>

統合は、ビデオ埋め込みコードを削除して、AEM のインタラクティブビデオ埋め込みコードで置き換えるだけで簡単にできます。次の URL で結果を確認できます。ページに存在するインタラクティブビデオが表示されますが、既存のクイックビューにまだ統合されていません。

インタラクティブビデオの既存のクイックビューへの統合

このタスクはスタンドアロン AEM Assets のユーザーのみに適用されます。
このプロセスの最後の手順は、Web サイトで使用されている既存のクイックビュー実装にインタラクティブビデオを統合することです。すべてのケースで機能する統合のソリューションはありません。すべてのクイックビュー実装は固有のものです。そのため、フロントエンド IT 担当者の支援を受けた特別なアプローチが必要になります。
既存のクイックビュー実装は一般的に、Web ページ上で以下の順に発生する、相互に関連するアクションの連鎖となっています。
  1. ユーザーは、Web サイトのユーザーインターフェイス内で、特定の要素を起動します。
  2. フロントエンドコードは、手順 1 で起動されたユーザーインターフェイス要素に基づいてクイックビュー URL を取得します。
  3. フロントエンドコードは、手順 2 で取得した URL を使用して AJAX リクエストを送信します。
  4. バックエンドロジックは、対応するクイックビューのデータまたはコンテンツをフロントコードに送り返します。
  5. フロントエンドコードは、そのクイックビューのデータまたはコンテンツを読み込みます。
  6. (オプション)フロントエンドコードは、読み込んだクイックビューのデータを HTML 表現に変換します。
  7. フロントエンドコードは、モーダルダイアログボックスまたはパネルを表示し、エンドユーザー向けに、画面上に HTML コンテンツをレンダリングします。
これらの呼び出しは、必ずしもそれぞれ独立した、Web ページのロジックから任意の手順で呼び出すことができるパブリックな API 呼び出しを表すわけではありません。むしろ、次の手順がすべて前の手順の最終フェーズ(コールバック)に潜むような連鎖的な呼び出しになっています。
インタラクティブビデオが手順 1 と(部分的に)手順 2 を置き換えます。それに加えて、ユーザーがインタラクティブビデオ内のサムネールをクリックしたときに、そのユーザー操作がビューアによって処理されます。ビューアは、AEM に以前に追加されたすべてのサムネールデータを含む Web ページに、イベントを返します。
そのようなイベントハンドラーでは、フロントエンドコードは次の処理を実行します。
  • インタラクティブビデオから送出されるイベントをリッスンします。
  • サムネールデータに基づいてクイックビュー URL を作成します。
  • バックエンドからクイックビューを読み込み、画面上の表示用にレンダリングするプロセスを起動します。
また、インタラクティブビデオビューアでは、全画面操作モードもサポートされます。全画面表示でエンドユーザーがサムネールをクリックすると、クイックビューがトリガーされます。この機能を実現するためには、クイックビューモーダルダイアログボックスがビューアのコンテナにアタッチされるようにフロントエンドコードを変更します。ドキュメントの Body またはその他の Web ページ要素(ビューアが全画面モードになっているときに使用できない)を追加しないでください。このジョブを実行するコードは、ビューアがページに読み込まれた後で送信されるもう 1 つのビューアコールバックをリッスンする必要があります。
AEM によって返される埋め込みコードには、すぐに使用可能なイベントハンドラーが既に含まれています。次のハイライトされたコードスニペットのように、コメントアウトされています。
<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%; 
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : { 
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/", 
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 /* // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({ 
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
    //To pass other parameter from the hotspot, you need to add custom parameter during the hotspot setup as parameterName=value
    loadQuickView(sku); //Replace this call with your quickview plugin
    //Please refer to your quickviewer plugin for the quickview call
    }, 
"initComplete":function() { 
    //--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
    var popup = document.getElementById('quickview_div'); // get custom quickview container
    popup.parentNode.removeChild(popup); // remove it from current DOM
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId); 
    inner_container.appendChild(popup); //Attach custom quickview container to viewer
    } 
   });
 */
 s7interactivevideoviewer.init();
</script>

そのため、必要な処理は、このハイライトされたコードスニペットのコメントアウトを解除し、ダミーのハンドラー本体を、特定の Web ページ専用のコードに置き換えることだけです。
標準の埋め込みコードには、2 つのデフォルトコールバックハンドラー、 quickViewActivate initComplete が含まれています。 quickViewActivate ハンドラーがトリガーされるのは、ビューアでサムネールがクリックされるときです。これを使用して、ビューアをクイックビューのアクティベートロジックに統合します。 initComplete ハンドラーは、ビューアがページに読み込まれるときに 1 回だけトリガーされます。このハンドラーは、Web ページ DOM でのクイックビューダイアログボックスの位置を調整するために使用されます。
クイックビュー URL の作成プロセスは、このトピックで既に説明したサムネールの変数を識別するためのプロセスと逆になります。前に識別したクイックビュー URL の例を使用して、クイックビュー URL の各ケースでの作成方法を確認できます。
単一の SKU(クエリー文字列内)
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
単一の SKU(URL パス内) s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU とカテゴリ ID(クエリー文字列内)
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });
クイックビュー URL をトリガーしてクイックビューパネルをアクティベートするための最後の手順では、おそらく IT 部門のフロントエンド IT 担当者の支援が必要になります。フロントエンド IT 担当者は、すぐに使用できるクイックビュー URL を含め、クイックビュー実装を適切な手順から正しくトリガーするための最適な方法について理解しています。
これらの手順をデモ Web サイトに適用してインタラクティブビデオをクイックビューのコードに統合する方法を確認できます。このトピックでは先ほど、クイックビュー URL の構造を次のように識別しました。
/datafeed/$CategoryId$-$SKU$.json

この URL は quickViewActivate ハンドラー内で簡単に再構成できます。次のように、ビューアのコードを介してハンドラーに渡される categoryId オブジェクト内の sku フィールドと inData フィールドを使用します。
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

The demo website is triggering the Quickview dialog box using a simple loadQuickView() function call. この関数は、1 つの引数(クイックビューデータの URL)のみを受け取ります。したがって、インタラクティブビデオを統合するために必要な最後の手順は、 quickViewActivate ハンドラーに次のコード行を追加することです。
loadQuickView(quickViewUrl);

Finally, make sure that your Quickview dialog box is attached to the viewer's container element. デフォルトの埋め込みコードにはこの機能を実現するためのサンプルステップが含まれています。ビューアのコンテナ要素への参照を取得するには、次のコード行を使用できます。
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);

Where inner_container is a reference to a DIV element managed by the viewer. ダイアログボックスをこの DIV の子にしようとしています。
実際にモーダルダイアログボックス要素を探して前述のコンテナにアタッチする手順は、ケースごとに異なります。ここでも、必要なクイックビュー実装に詳しいフロントエンド開発者の助けを借りることをお勧めします。
サンプル Web サイトの場合、クイックビューモーダルダイアログボックスは DIV として実装され、クイックビューモーダル ID がドキュメント BODY に直接アタッチされています。このため、このダイアログをビューアのコンテナに移動するコードは、次のとおり単純です。
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));

完全なソースコードは以下のようになります。
<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%; 
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : { 
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/", 
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({ 
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
     var categoryId=inData.categoryId; //categoryId
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   "initComplete":function() { 
    //--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(document.getElementById("quickview-modal"));
    } 
   });
 s7interactivevideoviewer.init();
</script>

インタラクティブビデオが完全に統合された最終的なデモ Web サイトは次のようになります。

クイックビューを使用したカスタムポップアップの作成