プレイヤー例
以下のサンプルビデオは、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>
もちろん、上記のコードは、このドキュメントの後半で説明するように、プラグインのJavaScriptファイルとCSSファイルが含まれていることを前提としています。
ブラウザの互換性
プラグインは、これらの主要なブラウザの最新バージョンと互換性があります。
- Chrome デスクトップ
- クロームモバイル(アンドロイド6+)
- Firefox デスクトップ
- エッジ
- Safariデスクトップ
* - サファリモバイル(iOS 11.2以降)
*
プラグインはない 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° 動画をオフにする必要があります。
デバッグします
タイプ:boolean
Default Value: false
このプラグインのデバッグログを有効にします。
広告
現時点では、このプラグインでの広告のサポートは、IMA3 プレロールのみに制限されています。その他の種類の広告やその他の広告ベンダーは、現在サポートされていません。
既知の問題
- 同じプレーヤーで VR コンテンツと非VRコンテンツを混在させることはサポートされていません。このようなビューアエクスペリエンスの推奨は、必要に応じてプレーヤーを削除して再作成することです。Brightcove Playerのサンプルを参照してください。プレーヤーのダイナミックロード
- iOS 13では、アプリはデバイスの動作と向き(ジャイロスコープ)機能を使用する許可を求めます。この機能を実装するには、開発者は Permission API を使用する必要があります。詳細については、Apple の「許可の要求」ドキュメントを参照してください。
- Safari 12.x では、モバイルデバイスのジャイロスコープ統合はデフォルトでオフになっています。ジャイロ機能を機能させるには、モーション&オリエンテーションアクセス設定を変更する必要があります。
- 360°/VR プラグインはライブストリームで動作する可能性がありますが、公式にはサポートされていません。
- 最新の 360°/VR プラグインは、Brightcove Playerバージョン 6.17.0 以降と互換性があります。
- 360°/VR プラグインは MP4 レンディションを使用するため、複数のオーディオトラックをサポートしません (ブラウザーは MP4 で複数のオーディオトラックをサポートしていないため)。この問題は、複数のオーディオトラックを持つ 360° ビデオの MP4 レンディションを含まない取り込みプロファイルを使用することで回避できます。
- 360°/VRプラグインは、Internet Explorerでは機能しません。
- 360°/VRプラグインはDRMをサポートしていません。
- ステレオスコピック/スタックされたビデオは、プラグインではサポートされていません。
- モバイルデバイスでは、水平方向のスワイプのみが動作しますが(これはビューを水平方向に変更します)、画面を垂直方向にスワイプしても何もしません。垂直スワイプは、 デスクトップブラウザで動作します。
- Brightcove Playerの標準 (iframe) 実装では、方向は変更されません。
- iOSでは、360°プラグインがビデオを正しくレンダリングするために再生前にビデオをプリロードする設定はに設定する必要がありますビデオのプリロード(最速)プレーヤー内:
- iOSでは、360°/ VRプラグインはiOSネイティブプレーヤーでは機能しないため、フルスクリーンモードボタンは無効になっています。このため、を設定することをお勧めします
playsinline
フルスクリーン以外のビデオ再生の属性。 iOSとBrightcoveプレーヤー資料。