インタラクティブビデオ

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

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

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

デモURL

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

および

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

システム要件

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

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

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

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

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

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

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

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

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

ビューアがポップアップモードで動作している場合、ユーザーインターフェイスでフルスクリーンボタンは使用できません。

ビューアでは、ビデオ表示領域の右側にインタラクティブスウォッチが表示されるパネルが表示されます。 ビデオの再生に合わせてスウォッチのリストが自動的に進み、現在のビデオ領域に対応するスウォッチが表示されます。 スウォッチをクリックまたはタップすると、トリガーの作成時にそのスウォッチに関連付けられたアクションが実行されます。 設定によっては、トリガーがWebサイト上の別のページにリダイレクトされる場合があります。 または、製品情報をWebページロジックに渡す場合もあります。これにより、関連する製品コンテンツを表示するクイックビューを開くトリガーを設定できます。

ビデオチャプターが有効になっている場合は、ビデオコンテンツをすばやく移動できます。 ビデオチャプターは、ビデオスクラバートラックにマーカーとして表示され、ロールオーバー時（またはタッチシステムでのシングルタップ時）にチャプタータイトルと説明を表示します。 顧客は、チャプターマーカーをクリックするか、チャプター説明のバブルをタップすることで、特定のチャプターを「シーク」できます。

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

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

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

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

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

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

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

主な使用例は、デスクトップやタブレットデバイス向けのWebページ、また、デバイスの種類に応じてレイアウトを自動的に調整するレスポンシブデザインページです。

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

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

レスポンシブデザイン埋め込みモードでは、WebページによるコンテナDIVのサイズ変更の方法によって、ビューアの動作が異なります。 WebページでコンテナDIVの幅のみが設定され、高さは無制限のままの場合、ビューアでは、使用するアセットの縦横比に従って高さが自動的に選択されます。 この機能により、側面のパディングなしで、アセットが表示にぴったりと収まります。 この使用例は、Bootstrapや基盤などのレスポンシブWebデザインレイアウトフレームワークを使用するWebページで最も一般的です。

それ以外の場合は、WebページでビューアのコンテナDIVの幅と高さの両方が設定されている場合、ビューアはその領域を占め、Webページのレイアウトで指定されているサイズに従います。 良い例として、ビューアをモーダルオーバーレイに埋め込み、オーバーレイがWebブラウザーのウィンドウサイズに従ってサイズ設定される場合があります。

固定サイズ埋め込み

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

1. ビューアのJavaScriptファイルをWebページに追加する。

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

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

4. ビューアを作成し、初期化する。

5. ビューアのJavaScriptファイルをWebページに追加する。

   ビューアを作成するには、HTMLのheadにscriptタグを追加する必要があります。 ビューアのAPIを使用するには、必ずInterativeVideoViewer.jsを含めてください。 InteractiveVideoViewer.jsファイルは、次に示すように、IS-Viewersの標準のデプロイ先のhtml5/js/サブフォルダーにあります。

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

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

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

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

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

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

   プレースホルダーDIVは配置を指定する要素です。つまり、CSSのpositionプロパティをrelativeまたはabsoluteに設定します。

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

   次に、定義済みのプレースホルダーDIV要素の例を示します。

   <div id="s7viewer" style="position:relative"></div>
   

2. ビューアサイズの設定

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

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

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

   以下は、HTMLページで静的ビューアサイズを定義する例です。

   #s7viewer.s7interactivevideoviewer { 
    width: 640px; 
    height: 640px; 
   }
   

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

   interactivevideoviewer.setParam("stagesize", "640,640");
   

   CSSベースのアプローチを推奨し、この例で使用します。

3. ビューアを作成し、初期化する。

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

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

   ビューアのコードがIDでコンテナ要素を見つけられるように、ビューアのコンテナをDOMに追加することが重要です。 一部のブラウザーは、Webページの終わりまでDOMの構築を遅らせます。 互換性を最大にするには、 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です。

   <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ページの例です。

   <!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. ビューアのJavaScriptファイルをWebページに追加する。
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ページでは、HTML要素とBODY要素のサイズを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>

セッターベースのAPIを使用した埋め込み

JSONベースの初期化を使用する代わりに、セッターベースのAPIとno-argsコンストラクターを使用できます。 このAPIを使用する場合は、コンストラクターにパラメーターは不要です。設定パラメーターは、 setContainerId()、 setParam()およびsetAsset()の各APIメソッドを別々のJavaScript呼び出しで使用して指定します。

次の例は、固定サイズ埋め込みをセッターベースの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>