360°/VR

プレイヤー例

以下のサンプルビデオは、360°/VR プラグインの使用方法を示しています。ビデオをクリックして再生すると、マウスまたは矢印キーを使用してデスクトップ上の表示を制御したり、モバイルデバイスで表示する場合はジャイロスコープを使用できます。360°ビデオロゴ再生ボタンは再生時に消えます。

はじめに

特徴

360°/VRプラグインの機能は次のとおりです。

モバイルデバイスでのジャイロスコープの統合：スマートフォンを回転させると、パースペクティブが変化します。
段ボール/VRモードのサポート：サポートしているデバイスでは、Cardboard ビューアアイコンがコントロールバーに表示されます。押すと、投影はカードボードスタイルの VR ゴーグルで動作するように調整されます。
ビデオクラウドメディア 360° 設定 :Video Cloud ビデオを使用している場合、プラグインは Video Cloud メディアの 360° の設定を尊重します。値が存在しない場合は、ビデオを通常のビデオとして再生します。360°/VRプラグインを使用しているプレーヤーでは、360°ビデオのみが再生されるようにする必要はありません。
非ビデオクラウドメディア：おれがいたら Video Cloud から提供されるメディアを使用しないの場合、プラグインは引き続き使用できます。あなたは電話する必要がありますvrオブジェクトを渡すプラグインprojection次のように設定された値：
```
<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.vr({projection: '360'});
  });
</script>   
```
projectionプロパティをに設定し360、equirectangularSphereまたはすべて論理的に同等である。

もちろん、上記のコードは、このドキュメントの後半で説明するように、プラグインのJavaScriptファイルとCSSファイルが含まれていることを前提としています。

ブラウザの互換性

プラグインは、これらの主要なブラウザの最新バージョンと互換性があります。

Chrome デスクトップ
クロームモバイル（アンドロイド6+）
Firefox デスクトップ
エッジ
Safariデスクトップ *
サファリモバイル（iOS 11.2以降） *

* Safari でプラグインを使用する場合、Video Cloud 以外のビデオ（Video Cloud 経由で取り込まれていないビデオ）を使用している場合は、crossorigin設定プロパティをanonymous。

プラグインはない InternetExplorerで動作します。

実装の概要

プラグインの実装は簡単です。次の 2 つの手順を完了するだけです。

ビデオを適切に取り込むこと。
プラグインをプレーヤーに追加します。

360°ビデオを取り込む

360°ビデオを録画したら、それをVideoCloudに取り込む必要があります。360°ビデオの仕組みを少し理解すると、インジェストプロファイルを選択するいくつかの理由を理解するのに役立ちます。360°のビデオは、球の内部に投影されるように撮影されます。これは、プレーヤー内のビデオの表示領域は、ビデオ全体のほんの一部に過ぎないことを意味します。次のスクリーンショットは、この概念の大まかなアイデアを提供します。赤い長方形の内側の領域はプレーヤーに表示されるものですが、ビデオ全体のごく一部にすぎません。

一度にプレーヤーに表示されるのはビデオのごく一部であるため、低品質のレンディションにステップダウンすることなく、非常に高品質のレンディションを再生する必要があります。本質的に、あなたはビデオの一部を「ズームイン」しており、レンディションの品質が悪いと、非常に質の低い視聴体験が得られます。このため、動画をアップロードする際には、1 つの 1080 p レンディションと少なくとも 1 つのオーディオレンディションを使用して、カスタムの動的配信インジェストプロファイルを作成することをお勧めします。360°/VR プラグインを使用する場合は、HLS レンディションよりも優先されます。

ビデオを取り込むときは、ビデオの情報セクションに示されているように、360°投影用にマークされていることを確認してください。

プレーヤーモジュールを使用して実装する

360°/VR プラグインを実装するには、プラグインの名前と URL をプラグインの JavaScript および CSS ファイルに追加します。

を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
左側のナビゲーションメニューで [ プラグイン ] をクリックします。
[ プラグインの追加 ] ドロップダウンから、[ カスタムプラグイン ] を選択します。
[ プラグイン名 ] に、と入力しますvr。

JavaScript の URL には、次のように入力します。

https://players.brightcove.net/videojs-vr/1/videojs-vr.min.js

CSS の URL には、次のように入力します。

https://players.brightcove.net/videojs-vr/1/videojs-vr.css

このプラグインのオプションを入力する必要はありません。
[ 保存] をクリックします。
クリックスタイリング左側のナビゲーションメニューにあります。
視聴体験が向上すると感じた場合は、タイトルと説明ドックを無効にすることができます。これを行うには、チェックを外しますタイトルと説明を表示するチェックボックス。
プレーヤーを公開するには、[ パブリッシュと埋め込み] [> 変更を公開 ] をクリックします。
開くダイアログを閉じるには、[ 閉じる] をクリックします。

オプション

ForceCardBoard

タイプ:boolean Default Value: false

段ボールボタンをすべてのデバイスに表示させます。

MotionControls

タイプ:booleanデフォルト値：iOSとAndroidではtrueです

モーション/ジャイロコントロールを有効にするかどうかを決定します。

投影

タイプ:stringデフォルト値:自動

ビデオタイプ	`projection`オプションの値
球体	360 、球またはエクイレクタングラーの
立方体	キューブか360_CUBE
360°ビデオではありません	なし
現在の動画が 360° 動画であるかどうかを確認する場合は、`player.mediainfo.projection`	自動
360°ビデオを並べて	360_LR
上から下へ 360° ビデオ	360_TB

player.mediainfo.projection

タイプ:stringデフォルト値:未定義

この値はソースごとに設定し、ビデオに応じて 360° 動画をオフにする必要があります。

デバッグします