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

Interactive Video Viewerは、H.264形式でエンコードされたストリーミングおよびプログレッシブビデオを再生するビデオプレーヤーです。

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

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

デモ URL section-c0ad383db6a444979dc7eeb1ec4cf54d

https://landing.adobe.com/en/na/dynamic-media/ctir-2755/live-demos.html

システム要件 section-b7270cc4290043399681dc504f043609

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

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

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

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

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

すべてのビューアに共通する​ コマンド参照 – 構成属性およびすべてのビューアに共通するコマンド参照 – URLを参照してください

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

インタラクティブビデオビューアは、再生/一時停止ボタン、ビデオスクラバー、ビデオタイムバブル、再生時間/合計時間インジケーター、ボリュームコントロール、フルスクリーンボタン、クローズドキャプショントグルなど、ビデオ再生のための一連の標準ユーザーインターフェイスコントロールを提供します。 これらのコントロールはすべて、メインビューの直下にあるコントロールバーにグループ化されます。

タッチデバイスでは、ボリューム制御はユーザーインターフェイスから非表示になります。これは、デバイスのハードウェアボタンを使用してのみボリュームを制御できるためです。

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

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

ビデオチャプターがアクティブ化されると、ビデオコンテンツを素早くナビゲートできます。 ビデオチャプターは、ビデオスクラブラートラックにマーカーとして表示され、ロールオーバー時（またはタッチシステム上のシングルタップ時）にチャプターのタイトルと説明が表示されます。 お客様は、章マーカーをクリックするか、章説明バブルをタップすることで、特定の章を「シーク」できます。

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

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

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

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

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

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

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

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

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

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

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

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

固定サイズ埋め込み

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

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

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

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

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

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

レスポンシブデザインの埋め込みでは、通常、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>

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

上記のすべての手順は、固定サイズの埋め込みと同じです。 コンテナ 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>

Setter ベースの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>