ビデオ360

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

360度ビデオ(イマーシブビデオまたは球状ビデオとも呼ばれる)は、あらゆる方向の表示を同時に記録し、全方位カメラまたはカメラの集まりを使用して撮影したビデオ録画です。 単一のビデオとアダプティブビデオセットの両方がサポートされています。 ビューアでは、外部の場所にホストされているプログレッシブビデオおよびHLSストリームの操作もサポートされています。

360ビデオの推奨される縦横比は2:1です。 空間サウンドはサポートされていません。 ビューアは、360ビデオのみで機能します。360以外のビデオを再生しようとすると、ビデオの歪んだ再生が行われます。

ビューアは、HTML5ビデオをサポートするデスクトップとモバイルのWebブラウザーの両方で動作するように設計されています。 Viewerでは、オプションのソーシャル共有ツールがサポートされます。

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

ビューアタイプ517

デモURL

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

システム要件

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

ビデオ360ビューアの使用

HTML5 Video360ビューアは、メインのJavaScriptファイルと、ビューアによって実行時にダウンロードされるヘルパーファイルのセット(この特定のビューア、アセット、CSSで使用されるすべてのHTML5ビューアSDKコンポーネントを含む1つのJavaScriptインクルード)です。

HTML5 Video360ビューアは、ISビューアに付属の運用に対応したHTMLページを使用するポップアップモードでも、ドキュメントに記述のあるAPIを使用してターゲットのWebページに統合される埋め込みモードでも、両方で使用できます。

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

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

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

  • 720p、2500 kbps
  • 1080p、5000 kbps
  • 1440p、6600 kbps

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

ビデオ360ビューアの操作

HTML5ビデオ360ビューアには、再生/一時停止ボタン、ビデオスクラバービデオ時間の吹き出し、再生時間/合計時間インジケーター、ボリュームコントロール、フルスクリーンボタンなど、ビデオ再生用の一連の標準ユーザーインターフェイスコントロールが用意されています。 ビューアユーザインターフェイスの最下部にあるコントロールバーに、すべてのコントロールがグループ別に表示されます。

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

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

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

ビューアは、VRヘッドセット(Oculus GoやOculus Riftなど)、VR HMD(ヘッドマウントディスプレイ)マウント(Googleのボール紙など)、VR非対応デバイス(VR HMDマウントに接続されていないデスクトップブラウザ、タブレット、携帯電話など)での360ビデオ再生をサポートします。

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

VR HMDマウントを使用するには、ビューアの設定でVideo360Player.vrrender修飾子を1に設定する必要があります。これにより、立体レンダリングが強制されます。

VRヘッドセットおよびVR HMDでは、ヘッドセットの移動に応じて表示変更のマウントポイントが発生し、VRモードでは他の再生制御が提供されません。

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

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

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

ビデオ360ビューアの埋め込み

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

複数のビデオを同じページに埋め込む機能は、タブレットと携帯端末でサポートされています。 ほとんどの場合、一度に1つのビデオしか再生できません。 あるビデオの再生中に開始がを行い、次に別のビデオの再生を試みると、最初のビデオが自動的に一時停止します。 自動一時停止されたビデオは、現在の再生時間を記憶するので、ユーザーはいつでもビデオに戻って再生を再開できます。 唯一の例外は、Android 4.xデバイスのChromeブラウザーでビデオを並行して再生できる点です。

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

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

このモードは、モバイルデバイスで最も一般的です。 Webページでは、window.open() JavaScript呼び出し、適切に設定されたA HTML要素またはその他の適切な方法を使用してビューアを読み込みます。

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

<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ページ、また、デバイスの種類に従ってレイアウトを自動調整するレスポンシブデザインページです。

固定サイズ埋め込みは、初回の読み込み後にビューアのサイズが変更されない場合に使用します。 静的レイアウトの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を使用するには、Video360Viewer.jsを必ず含めます。 Video360Viewer.jsファイルは、次に示すように、IS-Viewersの標準のデプロイ先のhtml5/js/サブフォルダーにあります。

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/Video360Viewer.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;width:640px;height:360px;"></div>
    
  2. ビューアのサイズの設定

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

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

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

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

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

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

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

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

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

    上記の手順を完了したら、s7viewers.Video360Viewerクラスのインスタンスを作成し、すべての設定情報をコンストラクターに渡して、ビューアインスタンスで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()メソッドを呼び出します。 この例では、次のことを前提としています。

    • ビューアインスタンスはvideo360Viewerです。
    • プレースホルダーDIVの名前はs7viewerです。
    • 画像サービングのURLはhttps://s7d9.scene7.com/is/imageです。
    • ビデオサーバーのURLはhttps://s7d9.scene7.com/is/contentです。
    • アセットはViewers/space_station_360-AVSです。
    <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>
    

    次のコードは、固定サイズのビデオ360ビューアを埋め込んだ簡単なWebページの例です。

    <!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({ 
     "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ページには通常、ビューアのコンテナ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://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>

このページ

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