360°/VR ビデオプラグイン

プレーヤー例

以下のサンプル動画は、360°/VR プラグインの使用例を示しています。動画を再生すると、デスクトップではマウスや矢印キー、モバイルデバイスではジャイロスコープを使って視点を操作できます。再生が開始されると、360° ビデオ用のロゴ付き再生ボタンは消えます。

はじめに

機能

360°/VR プラグインには以下の機能があります：

モバイルデバイスでのジャイロスコープ連携：携帯端末を回転させると視点が変化します。
Cardboard/VR モード対応：対応デバイスでは、コントロールバーに Cardboard ビューアーアイコンが表示されます。押すと、Cardboard 形式の VR ゴーグルに対応した投影に切り替わります。
Video Cloud メディアの 360°設定：Video Cloud 動画を使用している場合、プラグインは Video Cloud メディアの 360°設定を自動的に参照します。値が設定されていない場合は通常の動画として再生されます。360°動画のみが再生されるように管理する必要はありません。
非 Video Cloud メディア：Video Cloud 以外の配信メディアを使用する場合でも、このプラグインを利用できます。次のように vr プラグインを呼び出し、projection を指定する必要があります：
```
      <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
          myPlayer.vr({projection: '360'});
        });
      </script>
```
projection プロパティを 360、equirectangular、Sphere に設定するのは、いずれも同じ意味になります。

もちろん、このコードを動作させるには、後述のとおりプラグインの JavaScript と CSS を読み込んでおく必要があります。

ブラウザ互換性

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

Chrome デスクトップ
Chrome Mobile（Android 6+）
Firefox デスクトップ
Edge
Safari デスクトップ*
Safari Mobile（iOS 11.2+）*

* Safari で非 Video Cloud 動画（Video Cloud を通して取り込まれていない動画）を使用する場合、crossorigin 設定を anonymous に設定する必要があります。

このプラグインは Internet Explorer では動作しません。

実装概要

プラグインの実装は簡単で、次の 2 ステップを行います：

動画を適切に取り込む
プラグインをプレーヤーに追加する

360° ビデオの取り込み

360° ビデオを撮影したら、Video Cloud に取り込む必要があります。360° ビデオがどのように機能するかを少し理解しておくと、どのトランスコードプロファイルを選択すべきかが分かりやすくなります。360° ビデオは球体の内側に投影されることを前提に撮影されています。そのため、プレーヤーで実際に見えている領域は動画全体の一部分にすぎません。以下のスクリーンショットは、この概念の概要を示しています。赤い四角の内部がプレーヤーに表示される部分ですが、これは動画全体のごく一部です。

任意のタイミングでプレーヤーに表示されるのは動画の小さな部分であるため、高品質のレンディションを常に使用し、低品質のレンディションに切り替わらないようにすることが重要です。つまり動画の一部を「拡大して」閲覧するため、低品質のレンディションでは視聴体験が大幅に低下してしまいます。この理由から、動画をアップロードする際には、Brightcove では 1080p のレンディションを 1 つと、少なくとも 1 つの音声レンディションを含むカスタム Dynamic Delivery トランスコードプロファイルの作成を推奨しています。このプラグインを使用する場合、HLS レンディションよりもこちらが適しています。

また、取り込んだ動画が正しく 360° プロジェクションとしてマークされていることを確認してください。動画情報セクションの例は次のとおりです：

Players モジュールで実装する

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

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したい既存のプレーヤーを選択します。
プレーヤーのリンクをクリックしてプロパティを開きます。
左側のナビゲーションメニューから プラグイン をクリックします。
プラグインの追加 ドロップダウンから カスタムプラグイン を選択します。
プラグイン名 には vr と入力し、保存をクリックします。このプラグインではオプションを入力する必要はありません。
スタイルシート タブをクリックします。
スタイルシートの追加 をクリックし、CSS URL に以下を入力します：
```
https://players.brightcove.net/videojs-vr/2/videojs-vr.css
```
Brightcove Player 6 を使用している場合は、代わりに次の URL を使用してください：
```
https://players.brightcove.net/videojs-vr/1/videojs-vr.css
```
スクリプト タブをクリックします。
スクリプトの追加 をクリックし、JavaScript URL に以下を入力します：
```
https://players.brightcove.net/videojs-vr/2/videojs-vr.min.js
```
Brightcove Player 6 を使用している場合は、代わりに次の URL を使用してください：
```
https://players.brightcove.net/videojs-vr/1/videojs-vr.min.js
```
保存をクリックします。
左側のナビゲーションメニューから スタイル設定 をクリックします。
より良い視聴体験のためにタイトルと説明のドックを無効化したい場合は、タイトルおよび説明文を表示 のチェックを外します。
プレーヤーを公開するには、公開と埋め込み > 変更の公開 をクリックします。
開いているダイアログを閉じるには、閉じる をクリックします。

オプション

forceCardboard

Type: boolean　既定値: false

すべてのデバイスで Cardboard ボタンを強制的に表示します。

motionControls

Type: boolean　既定値: iOS と Android では true

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

projection

Type: string　既定値: auto

ビデオタイプ	`projection` オプションの値
sphere	360、Sphere、equirectangular
cube	Cube または 360_CUBE
360° ビデオではない場合	None
`player.mediainfo.projection` を使って現在の動画が 360° か確認したい場合	AUTO
左右分割（Side-by-side）の 360° ビデオ	360_LR
上下分割（Top-to-bottom）の 360° ビデオ	360_TB

player.mediainfo.projection

Type: string　既定値: undefined

動画ごとに 360° 再生のオン／オフを切り替えるために設定します。

debug