Video360 video

HTML5 Video360 ビューアは、Dynamic Media ClassicまたはDynamic MediaのAdobe Experience Managerから配信される、H.264 形式でエンコードされたストリーミングビデオとプログレッシブ 360 ビデオを再生する 360 度ビデオプレーヤーです。

360 度ビデオ（没入型ビデオや球形ビデオとも呼ばれます）は、全方位カメラやカメラのコレクションを使用して撮影し、あらゆる方向のビューを同時に記録するビデオ録画です。 単一のビデオとアダプティブビデオセットの両方がサポートされています。 また、外部でホストされるプログレッシブビデオおよび HLS ストリームの操作もサポートしています。

360 ビデオの推奨縦横比は 2:1 です。 空間サウンドはサポートされていません。 このビューアは 360 ビデオのみで動作するように設計されています。360 ビデオ以外のビデオを再生しようとすると、ビデオがゆがんで再生されます。

このビューアは、デスクトップとモバイル Web ブラウザーの両方で動作し、HTML5 ビデオをサポートしています。 ビューアは、オプションのソーシャル共有ツールをサポートしています。

Video360 ビューアは、基になるシステムが HLS 形式をサポートしている場合は常に、デフォルト設定で HLS 形式のHTML5 ストリーミングビデオ再生を使用します。 HTML5 ストリーミングをサポートしていないシステムでは、ビューアはHTML5 プログレッシブビデオ配信にフォールバックします。

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

デモ URL section-c0ad383db6a444979dc7eeb1ec4cf54d

https://s7d9.scene7.com/s7viewers/html5/Video360Viewer.html?asset=Viewers/space_station_360-AVS

システム要件 section-b7270cc4290043399681dc504f043609

詳しくは、 必要システム構成.

Video360 ビューアの使用 section-e6c68406ecdc4de781df182bbd8088b4

HTML5 Video360 ビューアは、メインの JavaScript ファイルと、ヘルパーファイルのセット ( このビューア、アセット、CSS で使用されるすべてのHTML5 Viewer SDK コンポーネントが含まれる 1 つの JavaScript インクルード ) です。

HTML5 Video360 ビューアは、IS-Viewers に付属する実稼動用HTMLページを使用するポップアップモードと、API を使用してターゲット Web ページに統合される埋め込みモードの両方で使用できます。

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

詳しくは、 すべてのビューアに共通のコマンドリファレンス — 設定属性 および すべてのビューアに共通のコマンドリファレンス — URL

360 ビデオコンテンツは、360 以外の標準のビデオよりも高いエンコーディング設定が必要です。 つまり、同じ知覚可能な品質を実現するには、360 コンテンツが 360 ビデオ以外のビデオよりも高い解像度で表示される必要があります。 360 ビデオに対しては、次のアダプティブビデオプリセット設定を考慮することをお勧めします。

ただし、このような高品質の設定でエンコードされたビデオを配信する場合は、エンドユーザーのデバイスで高帯域幅の接続が必要になります。

Video360 ビューアの操作 section-642e66ca38cd4032992840ec6c0b0cd2

HTML5 Video360 ビューアは、再生/一時停止ボタン、ビデオスクラバービデオの時間の吹き出し、再生時間/合計時間のインジケーター、ボリューム制御、フルスクリーンボタンなど、ビデオ再生用の一連の標準的なユーザーインターフェイスコントロールを提供します。 これらのコントロールはすべて、ビューアのユーザインターフェイスの下部にあるコントロールバーにグループ化されています。

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

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

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

ビューアでは、次の場合の 360 ビデオ再生がサポートされています。

VR ヘッドセットで 360 ビデオコンテンツを表示する場合、追加の設定は必要ありません。 ビューアは VR ヘッドセットの存在を自動的に検出し、ビデオコンテンツの上に「VR」ボタンを表示します。 この「VR」ボタンをオンにすると、ビデオレンダリングが VR モードに切り替わります。 ビューアは、WebVR がサポートされているブラウザーでのみ、VR レンダリングをサポートします。

VR HMD を使用するには、 Video360Player.vrrender 修飾子は次の値に設定する必要があります： 1 を設定します。

VR ヘッドセットと VR HMD マウントでは、ヘッドセットの移動に応じて視点の変化が起こり、VR モードでは他の再生制御が提供されません。

VR が有効でないデバイスで 360 ビデオを視聴する場合、エンドユーザーはマウス、タッチまたはキーボードを使用して、ビデオの再生と視点を制御できます。

ビューアは、タッチスクリーンとマウスを備えた Windows デバイスで、タッチ入力とマウス入力の両方をサポートしています。ただし、このサポートは、Chrome、Internet Explorer 11 および Edge Web ブラウザーに限られます。

ビューアが完全にキーボードでアクセス可能になる。 詳しくは、 キーボードのアクセシビリティとナビゲーション.

Video360 ビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

ビューアの動作に対するニーズは、Web ページごとに異なります。 Web ページにリンクが表示され、このリンクを選択すると、別のブラウザーウィンドウでビューアが開く場合があります。 ホスティングページに直接ビューアを埋め込む必要がある場合もあります。 後者の場合は、Web ページが静的ページレイアウトである場合や、デバイスごと、ブラウザーウィンドウのサイズごとに表示方法が変わるレスポンシブデザインを使用する場合があります。 これらのニーズに対応するために、ビューアでは、ポップアップ、固定サイズ埋め込み、レスポンシブデザイン埋め込みの 3 つの主要な操作モードをサポートしています。

同じページへの複数のビデオの埋め込みは、タブレットとモバイルデバイスでサポートされています。 通常、一度に 1 つのビデオのみ再生できます。 ユーザーが 1 つのビデオの再生を開始し、別のビデオの再生を試みると、最初のビデオが自動的に一時停止します。 自動一時停止されたビデオは現在の再生時間を記憶するので、ユーザーはいつでも元に戻って再生を再開できます。 ただし、Android™ 4.x デバイスの Chrome ブラウザーでは、ビデオを並行して再生できる点が例外です。

ポップアップモードについて

ポップアップモードでは、ビューアは別の Web ブラウザーウィンドウまたはタブで開きます。 ブラウザーウィンドウの全領域を占め、ブラウザーのサイズやデバイスの向きが変更された場合は調整されます。

このモードは、モバイルデバイスで最も一般的なモードです。 Web ページでは、 window.open() JavaScript 呼び出し（適切に設定） A HTML要素、またはその他の適切な方法。

ポップアップ操作モードには、標準のHTMLページを使用することをお勧めします。 これは、と呼ばれます。 Video360Viewer.html そしてそれは以下の場所にある html5/ 標準の IS-Viewers デプロイメントのサブフォルダー

<s7viewers_root>/html5/Video360Viewer.html

カスタム CSS を適用することで、視覚的なカスタマイズを実現できます。

次に、ビューアを新しいウィンドウでHTMLする開封コードの例を示します。

<a href="https://s7d9.scene7.com/s7viewers/html5/Video360Viewer.html?asset=Viewers/space_station_360-AVS" target="_blank">Open popup viewer</a>

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

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

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

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

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

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

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

固定サイズ埋め込み

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

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

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

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

<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://s7d9.scene7.com/s7viewers/html5/js/Video360Viewer.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 video360Viewer = new s7viewers.Video360Viewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/space_station_360-AVS",
 "serverurl":"https://s7d9.scene7.com/is/image/",
 "videoserverurl":"https://s7d9.scene7.com/is/content/"
}
}).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://s7d9.scene7.com/s7viewers/html5/js/Video360Viewer.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 video360Viewer = new s7viewers.Video360Viewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/space_station_360-AVS",
 "serverurl":"https://s7d9.scene7.com/is/image/",
 "videoserverurl":"https://s7d9.scene7.com/is/content/"
}
}).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://s7d9.scene7.com/s7viewers/html5/js/Video360Viewer.js"></script>
<style type="text/css">
#s7viewer.s7video360viewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var video360Viewer = new s7viewers.Video360Viewer();
video360Viewer.setContainerId("s7viewer");
video360Viewer.setParam("serverurl", "https://s7d9.scene7.com/is/image/");
video360Viewer.setParam("videoserverurl", "https://s7d9.scene7.com/is/content/");
video360Viewer.setAsset("Viewers/space_station_360-AVS");
video360Viewer.init();
</script>
</body>
</html>