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

プレーヤー例

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

はじめに

機能

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

モバイルデバイスでのジャイロスコープ連携: 端末を回転させると視点が変化します。
Cardboard/VR モードのサポート: 対応するデバイスでは、コントロールバーに Cardboard ビューアーアイコンが表示されます。押すと、Cardboard 形式の VR ゴーグルに対応した投影に調整されます。
Video Cloud Media の 360° 設定: Video Cloud 動画を使用している場合、プラグインは Video Cloud メディアの 360° 設定を尊重します。値が存在しない場合は通常の動画として再生されます。360°/VR プラグインを使用するプレーヤーで、360° 動画のみが再生されることを保証する必要はありません。
非 Video Cloud メディア: Video Cloud から配信されるメディアを使用しない場合でも、このプラグインを使用できます。次のように projection 値を設定したオブジェクトを渡して、vr プラグインを呼び出す必要があります:
```
<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 モバイル（Android 6+）
Firefox デスクトップ
Edge
Safari デスクトップ *
Safari モバイル（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 取り込みプロファイルを作成することを推奨します。これは 360°/VR プラグインを使用する場合に HLS レンディションよりも好ましい方法です。

動画を取り込む際は、必ず 360° 投影としてマークされていることを確認してください。これを行うには:

Media モジュールで動画を開きます。
右側のナビゲーションで Advanced Settings をクリックします。
Video Playback アコーディオンを展開します。
Video is 360° Projection を有効にします。
Save をクリックします。

Video Playback section in Advanced Settings showing the Video is 360° Projection toggle enabled

Players モジュールを使用した実装

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

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを探します。
プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
Overview タブの Plugins セクションを展開します。
Add Plugin ドロップダウンから Custom Plugin を選択します。
Plugin Name に vr と入力し、Add をクリックします。このプラグインではオプションを入力する必要はありません。
Stylesheets タブをクリックします。
Add Stylesheet をクリックし、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
```
Scripts タブをクリックします。
Add Script をクリックし、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
```
Save をクリックします。
Overview タブの Styling セクションを展開します。
視聴体験を向上させると感じる場合は、タイトルと説明のドックを無効化できます。これを行うには、Show title and description チェックボックスのチェックを外します。
プレーヤーを公開するには、Publish Changes をクリックします。
開いているダイアログを閉じるには、Close をクリックします。

オプション

forceCardboard

型: boolean デフォルト値: false

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

motionControls

型: boolean デフォルト値: iOS と Android では true

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

projection

型: string デフォルト値: auto

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

player.mediainfo.projection

型: string デフォルト値: undefined

この値は、動画に応じて 360° 動画のオン/オフを切り替えるために、ソースごとに設定する必要があります。

debug