インタラクティブビデオ

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

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

ビューアタイプ510

デモURL

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/glacier/InteractiveVideoViewerDemo.html

と

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/AXIS/index.html

システム要件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

固定サイズ埋め込み

ビューアは、次の操作を行ってWebページに追加します。

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

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

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

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

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

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

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

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

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

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js?lang=ja"></script>
メモ

ページ上のメインビューアのJavaScript includeファイルのみを参照してください。 Webページコード内で、ビューアのロジックによって実行時にダウンロードされる可能性のある追加のJavaScriptファイルは、参照しないでください。 特に、ビューアによって読み込まれたHTML5 SDK Utils.jsライブラリを/s7viewersコンテキストパスから直接参照しないでください（いわゆる統合SDK include）。 理由は、Utils.jsや類似のランタイムビューアライブラリの場所がビューアのロジックで完全に管理され、ビューアのリリース間で場所が変化するからです。 Adobeでは、古いバージョンのセカンダリビューアincludesはサーバに保持されません。

その結果、新しい製品バージョンがデプロイされる際に、ビューアが使用する任意のセカンダリJavaScript includeへの直接参照をページ上に置くと、ビューアの機能が将来的に機能しなくなります。

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

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

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

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

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

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

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

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

    サイズ調整は、CSS内で直接HTMLページまたはカスタムビューアのCSSファイルに配置できます。その後、カスタムビューアのCSSファイルが、AEM Assetsのオンデマンドでビューアプリセットレコードに割り当てられるか、styleコマンドを使用して明示的に渡されます。

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

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

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

    stagesize修飾子は、AEM Assetsのオンデマンドのビューアプリセットレコードに設定できます。 または、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行のコードでビューアを作成し、開始できます。

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

    同時に、コンテナ要素がまだ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>

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now