インタラクティブビデオ interactive-video

インタラクティブビデオビューアは、H.264 形式でエンコードされたストリーミングおよびプログレッシブビデオを再生するビデオプレーヤーです。

また、ビューアのビデオコンテンツの横には、インタラクティブな製品スウォッチも表示されます。 単一のビデオとアダプティブビデオセットの両方がサポートされています。 HTML5 ビデオをサポートするデスクトップとモバイルの両方の web ブラウザーで動作するように設計されています。 このビューアは、ビデオコンテンツ、ビデオチャプターナビゲーションおよびソーシャル共有ツールの上に表示されるオプションのクローズドキャプションをサポートします。 このビューアの目的は、「ショッパブルビデオ」エクスペリエンスの実装を支援することです。 つまり、ユーザーは、特定のビデオ時間領域に関連付けられているスウォッチを選択し、顧客の web サイトのクイックビューまたは製品詳細ページにリダイレクトされます。

ビューアのタイプは 510 です。

デモ URL section-c0ad383db6a444979dc7eeb1ec4cf54d

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/glacier/InteractiveVideoViewerDemo.html?lang=ja

および

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/AXIS/index.html?lang=ja

システム要件 section-b7270cc4290043399681dc504f043609

必要システム構成を参照してください。

インタラクティブビデオビューアの使用 section-e6c68406ecdc4de781df182bbd8088b4

インタラクティブビデオビューアは、メインのJavaScript ファイルと、実行時にビューアがダウンロードするヘルパーファイルのセットを表します。 この特定のビューア、アセットおよび CSS で使用されるすべての Viewer SDK コンポーネントには、1 つのJavaScriptが含まれています。

インタラクティブビデオビューアは、画像サービングビューアに付属の実稼動用HTMLーページを使用して、ポップアップモードで使用できます。 また、埋め込みモードで使用し、ドキュメントに記載された API を使用してターゲットの web ページに統合することもできます。

設定とスキニングは、このガイドで説明する他のビューアの設定と似ています。 すべてのスキニングは、カスタム(CSS)カスケーディングスタイルシート(CSS)を使用して行います。

すべてのビューアに共通のコマンドリファレンス – 設定属性および すべてのビューアに共通のコマンドリファレンス - URL を参照してください

インタラクティブビデオビューアの操作 section-642e66ca38cd4032992840ec6c0b0cd2

インタラクティブビデオビューアには、ビデオ再生用の標準のユーザーインターフェイスコントロールが用意されています。例えば、再生/一時停止ボタン、ビデオスクラバー、ビデオのタイムバブル、再生時間/合計時間インジケーター、ボリュームコントロール、フルスクリーンボタン、クローズドキャプションの切り替えなどです。 これらのコントロールはすべて、メイン ビューの直下のコントロール バーにグループ化されます。

タッチデバイスでは、デバイスのハードウェアボタンを使用してのみ音量を制御できるため、音量コントロールはユーザーインターフェイスに表示されません。

ビューアがポップアップモードで動作する場合、ユーザーインターフェイスで全画面表示ボタンを使用できません。

ビューアのビデオ表示領域の右側に、インタラクティブスウォッチを含むパネルが表示されます。 ビデオの再生中にスウォッチのリストが自動的に進み、現在のビデオ領域に対応するスウォッチが表示されます。 スウォッチをクリックまたはタップすると、オーサー時にそのようなスウォッチに関連付けられたアクションがトリガーされます。 設定方法によっては、トリガーが Web サイトの別のページにリダイレクトする場合があります。 または、商品情報を web ページロジックに返す場合があります。この結果、関連する商品コンテンツを表示するクイックビューを開く際にトリガーが発生する可能性があります。

ビデオチャプターがアクティベートされると、ビデオコンテンツ内をすばやく移動できます。 ビデオチャプターは、ビデオスクラバートラックにマーカーとして表示され、ロールオーバー(またはタッチシステムのシングルタップ)でチャプターのタイトルと説明が表示されます。 顧客は、チャプターマーカーをクリックするか、チャプター説明のバブルをタップして、特定のチャプターを「シーク」できます。

また、ビューアは、様々なソーシャルメディア共有ツールもサポートしています。 ユーザーインターフェイスでは 1 つのボタンとして使用でき、ユーザーがクリックまたはタップすると、共有ツールバーに展開されます。 共有ツールバーには、Facebook、Twitter、メール共有、埋め込みコード共有、リンク共有など、サポートされている共有チャネルのタイプごとのアイコンが含まれています。 メール共有、埋め込み共有、リンク共有の各ツールがアクティベートされると、ビューアは対応するデータ入力フォームを含むモーダルダイアログボックスを表示します。 facebookまたはTwitterが呼び出されると、ビューアはソーシャルメディアサービスから標準の共有ダイアログボックスにリダイレクトします。 また、共有ツールがアクティブになると、ビデオの再生は自動的に一時停止します。 Web ブラウザーのセキュリティ制限により、共有ツールは全画面表示モードでは使用できません。

ビューアは完全にキーボードでアクセス可能です。 詳しくは キーボードアクセシビリティとナビゲーションを参照してください。

インタラクティブビデオビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

インタラクティブビデオビューアは、ホスティングページに埋め込まれます。 そのような web ページは、静的なレイアウトを持つ場合や、「レスポンシブ」でデバイスやブラウザーウィンドウのサイズによって表示が異なる場合があります。

これらのニーズに対応するために、ビューアでは 2 つの主要な操作モード(固定サイズ埋め込みとレスポンシブ埋め込み)をサポートしています。

固定サイズ埋め込みモードとレスポンシブデザイン埋め込みモードについて

埋め込みモードでは、ビューアが既存の web ページに追加されます。これには、ビューアに関連しない顧客コンテンツが既に含まれている場合があります。 閲覧者は通常、Web ページの不動産の一部のみを占有します。

主なユースケースは、デスクトップまたはタブレットデバイス向けの web ページと、デバイスタイプに応じて自動的にレイアウトを調整するレスポンシブデザインのページです。

固定サイズの埋め込みは、初回読み込み後にビューアのサイズが変更されない場合に使用されます。 この機能は、静的なレイアウトを持つ web ページに最適です。

レスポンシブデザインの埋め込みは、コンテナコンポー DIV ントのサイズ変更に応じて、実行時にビューアのサイズを変更する必要があることを前提としています。 最も一般的なユースケースは、柔軟なページレイアウトを使用する web ページにビューアを追加する場合です。

レスポンシブデザインの埋め込みモードでは、web ページのコンテナコンポー DIV ントのサイズがどのように調整されるかに応じて、ビューアの動作が異なります。 Web ページでコンテナ DIV の幅のみが設定され、高さが制限されない場合、ビューアは、使用されるアセットの縦横比に応じて自動的に高さを選択します。 この機能により、アセットが側面にパディングを入れずに、ビューに完全に収まります。 このユースケースは、Bootstrapや基盤などのレスポンシブ web デザインレイアウトフレームワークを使用する web ページで最も一般的です。

そうでない場合、web ページでビューアのコンテナ DIV の幅と高さの両方が設定されていると、ビューアはその領域だけを埋め、web ページレイアウトが提供するサイズに従います。 良い例は、ビューアをモーダルオーバーレイに埋め込む場合です。この場合、オーバーレイは web ブラウザーのウィンドウサイズに応じてサイズが調整されます。

固定サイズ埋め込み

Web ページにビューアを追加するには、次の手順を実行します。

  1. Web ページへのビューアJavaScript ファイルの追加

  2. コンテナ DIV を定義します。

  3. ビューアサイズの設定。

  4. ビューアの作成と初期化。

  5. Web ページへのビューアJavaScript ファイルの追加

    ビューアを作成するには、HTMLの先頭にスクリプトタグを付ける必要があります。 ビューア API を使用する前に、必ず InterativeVideoViewer.js を含めてください。 InteractiveVideoViewer.js ファイルは、標準の IS-Viewers デプロイメントの html5/js/ サブフォルダーにあります。

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js

ビューアがAdobe Dynamic Media Classic サーバーの 1 つにデプロイされ、同じドメインから提供される場合は、相対パスを使用できます。 そうでない場合は、IS-Viewers がインストールされているAdobe Dynamic Media Classic サーバーの 1 つへのフルパスを指定します。

相対パスは次のようになります。

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
NOTE
ページ上のメインビューアのJavaScript include ファイルのみを参照します。 実行時にビューアのロジックによってダウンロードされる可能性がある web ページコード内の追加のJavaScript ファイルを参照しないでください。 特に、ビューアによって読み込まれるHTML5 SDK Utils.js ライブラリをコンテキストパス(いわゆる統合 SDK include)から直接参照 /s7viewers ないでください。 これは、Utils.js や類似のランタイム・ビューア・ライブラリの場所はビューアのロジックによって完全に管理され、ビューア・リリース間で場所が変更されるためです。 Adobeは、古いバージョンのセカンダリ・ビューア includes をサーバ上に保持しません。
その結果、ビューアが使用するセカンダリ JavaScript include ージをページ上で直接参照すると、今後、新しい製品バージョンがデプロイされた際に、ビューアの機能が損なわれます。
  1. コンテナ DIV を定義します。

    ビューアを表示するページに、空の DIV 要素を追加します。 DIV 要素には ID が定義されている必要があります。これは、この ID が後でビューア API に渡されるためです。 DIV のサイズは CSS で指定します。

    プレースホルダー DIV は配置済み要素です。つまり、position CSS プロパティは relative または absolute に設定されています。

    Internet Explorer でフルスクリーン機能を正しく機能させるには、プレースホルダーフ DIV ールドよりも重ね順が大きい要素が DOM に他にないことを確認します。

    定義されたプレースホルダー DIV 要素の例を以下に示します。

    code language-html
    <div id="s7viewer" style="position:relative"></div>
    
  2. ビューアサイズの設定

    ビューアの静的サイズは、トップレベル CSS クラスに対して絶対単位で宣言す .s7interactivevideoviewer か、修飾子を使用して設定 stagesize きます。

    HTMLページに直接、CSS でサイズ設定を指定できます。 または、カスタムビューア CSS ファイルに配置することもできます。このファイルは、後でAdobe Experience Manager Assetsのビューアプリセットレコードにオンデマンドで割り当てられたり、コマンドを使用して明示的に渡され style りします。

    CSS を使用したビューアのスタイル設定について詳しくは、 インタラクティブビデオビューアのカスタマイズを参照してください。

    HTMLページで静的ビューアのサイズを定義する例を以下に示します。

    code language-html
    #s7viewer.s7interactivevideoviewer {
     width: 640px;
     height: 640px;
    }
    

    stagesize 修飾子は、Experience Manager Assets - オンデマンドのビューアプリセットレコードで設定できます。 または、次のように、コレクションを使用して、またはコマンドリファレンスの節で説明されてい params ように、API 呼び出しとしてビューア初期化コードで明示的に渡すこともできます。

    code language-html
    interactivevideoviewer.setParam("stagesize", "640,640");
    

    この例では、CSS ベースのアプローチをお勧めします。

  3. ビューアの作成と初期化。

    上記の手順を完了したら、クラスのインスタンスを作成し、すべての設定情報 s7viewers.InteractiveVideoViewer そのコンストラクターに渡し、ビューアインスタンスのメソッド init() 呼び出します。 設定情報は、JSON オブジェクトとしてコンストラクターに渡されます。 少なくとも、このオブジェクトにはビューアコンテナ ID の名前 containerId 保持するフィールドと、ビューアでサポートされ params 設定パラメーターを含むネストされた JSON オブジェクトが必要です。

    この場合、params オブジェクトには、少なくとも画像サービング URL がプロパティとして渡され、初期アセット serverUrl パラメーターとして渡されてい asset 必要があります。 JSON ベースの初期化 API を使用すると、1 行のコード、プロパティとして渡されたビデオサーバー URL、パラメーターとしての初期アセット、プロパティとして videoserverurl ンタラクティブデータで、ビューア asset 作成および起動 interactivedata きます。 JSON ベースの初期化 API を使用すると、1 行のコードでビューアを作成して開始できます。

    ビューアコードが ID でコンテナ要素を見つけられるように、ビューアコンテナを DOM に追加することが重要です。 一部のブラウザーでは、web ページの最後まで DOM の構築が遅れます。 互換性を最大限に高めるには、終了 BODY タグの直前または body onload() イベントで init() メソッドを呼び出します。

    同時に、コンテナ要素は、まだ web ページレイアウトの一部である必要はありません。 例えば、割り当てられたスタイルを使用して非表示 display:none する場合があります。 この場合、ビューアは、web ページがコンテナ要素をレイアウトに戻す瞬間まで、初期化プロセスを遅延します。 その結果、ビューアの読み込みが自動的に再開されます。

    以下に、ビューアインスタンスを作成し、必要な最小限の設定オプションをコンストラクターに渡して、init() メソッドを呼び出す例を示します。 この例では、次のことを前提としています。

    • ビューアインスタンスは interactiveVideoViewer です。
    • プレースホルダー DIV の名前は s7viewer です。
    • 画像サービング URL は https://aodmarketingna.assetsadobe.com/is/image/ です。
    • ビデオサーバーの URL は https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna です。
    • コンテンツ URL は https://aodmarketingna.assetsadobe.com/ です。
    • アセットは /content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4 です。
    • インタラクティブデータは is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt です。
    code language-html
    <script type="text/javascript">
    var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
    "config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
     "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
     "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
     "contenturl":"https://aodmarketingna.assetsadobe.com/",
    "interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
    }
    }).init();
    </script>
    

    次のコードは、インタラクティブビデオビューアを固定サイズで埋め込む、単純な web ページの完全な例です。

    code language-html
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
    <style type="text/css">
    #s7viewer.s7interactivevideoviewer {
     width: 640px;
     height: 480px;
    }
    </style>
    </head>
    <body>
    <div id="s7viewer" style="position:relative;"></div>
    <script type="text/javascript">
    var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
    "config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
     "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
     "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
     "contenturl":"https://aodmarketingna.assetsadobe.com/",
    "interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
    }
    }).init();
    </script>
    </body>
    </html>
    

高さが制限されないレスポンシブデザインの埋め込み

レスポンシブデザインの埋め込みを使用すると、通常、web ページには、ビューアのコンテナ DIV ージの実行時サイズを指定する何らかの柔軟なレイアウトが配置されます。 次の例では、web ページで、ビューアのコンテナ DIV が web ブラウザーのウィンドウサイズの 40% を占め、高さは無制限であるとします。 Web ページのHTMLコードは次のようになります。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

このようなページにビューアを追加する手順は、固定サイズの埋め込みを行う手順と似ています。 唯一の違いは、ビューアのサイズを明示的に定義する必要がないことです。

  1. Web ページへのビューアJavaScript ファイルの追加
  2. コンテナ DIV の定義。
  3. ビューアの作成と初期化。

上記の手順はすべて、固定サイズの埋め込みと同じです。 コンテナ DIV を既存の "holder" DIV に追加します。 次のコードは完全な例です。 ブラウザーのサイズを変更するとビューアのサイズがどのように変化するか、ビューアの縦横比がアセットとどのように一致するかを確認します。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
 "contenturl":"https://aodmarketingna.assetsadobe.com/",
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
}
}).init();
</script>
</body>
</html>

以下の例では、高さが制限されないレスポンシブデザインの埋め込みを使用した実際の使用例を示しています。

ライブデモ

代替デモの場所

幅と高さが定義されたレスポンシブ埋め込み

幅と高さが定義されたレスポンシブ埋め込みがある場合、web ページのスタイル設定は異なります。 "holder" DIV のサイズとブラウザーウィンドウの中央に合わせたサイズの両方が提供されます。 また、web ページでは、HTMLBODY 要素のサイズが 100% に設定されます。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

残りの埋め込みステップは、高さが制限されないレスポンシブ埋め込みに使用されるステップと同じです。 結果の例を次に示します。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
 "contenturl":"https://aodmarketingna.assetsadobe.com/",
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
}
}).init();
</script>
</body>
</html>

Setter ベースの API を使用した埋め込み

JSON ベースの初期化を使用する代わりに、setter ベースの API および no-args コンストラクターを使用することができます。 この API コンストラクターを使用すると、パラメーターは取得されず、setContainerId()setParam()setAsset() の API メソッドを使用して、個別のJavaScript呼び出しで設定パラメーターが指定されます。

次の例は、setter ベースの API を使用した固定サイズの埋め込みの使用を示しています。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
#s7viewer.s7interactivevideoviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer();
interactiveVideoViewer.setContainerId("s7viewer");
interactiveVideoViewer.setParam("config", "/etc/dam/presets/viewer/Shoppable_Video_Dark");
interactiveVideoViewer.setParam("serverurl", "https://aodmarketingna.assetsadobe.com/is/image/");
interactiveVideoViewer.setParam("videoserverurl", "https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna");
interactiveVideoViewer.setParam("contenturl", "https://aodmarketingna.assetsadobe.com/");
interactiveVideoViewer.setParam("interactivedata", "is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt");
interactiveVideoViewer.setAsset("/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4");
interactiveVideoViewer.init();
</script>
</body>
</html>
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8