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

製品(複数可)
Video Cloud
Brightcove Player
役割
プレーヤー開発者
トピック)
360動画
プラグイン

このトピックでは、このプラグインがどのようにして記録されたビデオを HTML5 パノラマの360ºビデオに変換して Brightcove Player で再生するのかを学びます。

プレイヤーの例

以下のサンプルビデオは、360°/ VR Plugin の使用方法を示しています。 クリックしてビデオを再生中には、デスクトップの場合にはマウスまたは矢印キーを、モバイルデバイスの場合にはジャイロスコープ使用してビューを制御することが可能です。 360°ビデオ用の再生ボタンは、再生が始まると非表示になります。

はじめに

機能

以下は360°/ VR Pluginの機能です:

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

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

ブラウザの互換性

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

  • Chromeデスクトップ
  • Chromeモバイル(Android 6 +搭載)
  • Firefoxのデスクトップ
  • エッジ
  • Safariデスクトップ *
  • Safari Mobile(iOS 11.2 +) *

プラグインは NOT Internet Explorerで作業します。

制限事項

360°/ VRプラグインを使用する場合は、次の点に注意する必要があります。

  • MP4ビデオのレンディションは、このプラグインを使用するビデオのHLSよりも優先されます。
  • シングルビットレート:選択する必要があります シングルビットレート高 360ビデオのインジェストプロファイルとして使用できます。 これは360 / VRの再生が一度にフレームの小さな部分だけを表示するためです(この詳細については、このドキュメントの次のセクションで詳しく説明します)。 他の設定では、品質が非常に悪くなります。 あなたが使用していない場合 Video Cloudレンディションの切り替えを無効にするには、単一の高解像度HLSレンディションまたはMP4ビデオを使用することをお勧めします。

実装の概要

プラグインの実装は簡単ですが、次の2つの手順を完了してください:

360のビデオを取り込む

Once あなたは360ビデオを録画しているので、それを取り込む必要があります Video Cloud。 360ビデオがどのように機能するかを少し理解すれば、Ingest Profileが選択するいくつかの理由を理解するのに役立ちます。 360ビデオは、球の内部に投影されるように撮影されます。 これは、プレーヤー内のビデオの可視領域がビデオ全体のほんの一部であることを意味します。 次のスクリーンショットは、このコンセプトの大まかなアイデアです。 赤い矩形の内側の領域は、プレーヤで表示される領域ですが、ビデオ全体のうちのほんの一部です。

ビデオの一部を表示する

ビデオのわずかな部分だけがいつでもプレイヤーに入るので、あなたは、質の低い演奏に降りかける機会がなく、非常に高品質の演奏を再生したいと思っています。 本質的に、あなたはビデオの一部を「ズームイン」していて、品質の低い演出は非常に品質の低い視聴体験をもたらすでしょう。 このため、摂取プロセスでは、品質の高いIngest Profileを使用する必要があります。 Brightcove の使用をお勧めします 単一ビットレート高(2レンディション) 360の動画のインゲストプロフィール。 このプロファイルには高品質のMP4レンディションが含まれています。これは、360プラグインを使用する場合のHLSレンディションよりも優先されます。

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

ビデオの一部を表示する

Playersモジュールを使用して実装する

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

  1. Video Cloud Studioで プレイヤー 新しいプレーヤーを作成するか、プラグインを追加するプレイヤーを探します。
  2. プレーヤーのリンクをクリックしてプレーヤーのプロパティを開きます。
  3. . プラグイン 左側のナビゲーションメニューにあります。
  4. 次にクリック プラグイン 3つの選択肢から。
    プラグインを選択
  5. から プラグインを追加する select カスタムプラグイン.
  6. のために プラグイン名 入力します vr.
  7. のために JavaScriptを URL、入力:
    https://players.brightcove.net/videojs-vr/1/videojs-vr.min.js
  8. のために CSS URL、入力:
    https://players.brightcove.net/videojs-vr/1/videojs-vr.css
  9. このプラグインのオプションを入力する必要はありません。
  10. . 変更を保存し、.
  11. . スタイリング 左側のナビゲーションメニューにあります。
  12. より良い視聴体験があると感じたら、タイトルと説明のドックを無効にすることができます。 これを行うには、 タイトルと説明を表示する チェックボックスをオンにします。
    ドックを無効にする
  13. プレーヤーを公開するには、をクリックします。 パブリッシュと埋め込み>変更をパブリッシュする.
  14. 開いているダイアログを閉じるには、をクリックします。 閉じる.

オプション

forceCardboard

タイプ: boolean デフォルト値: false

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

projection

タイプ: string デフォルト値:auto

ビデオタイプ projection オプション
sphere 360, Shpere or equirectangular
cube Cube or 360_CUBE
360の動画ではありません None
現在の動画が360動画であるかどうかを確認したい場合は以下を確認 player.mediainfo.projection AUTO
横並びの360ビデオ 360_LR
上から下の360ビデオ 360_TB

player.mediainfo.projection

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

この値は、ビデオごとに360ビデオをオフにするために、ソースごとに設定する必要があります。

debug

タイプ: boolean デフォルト値: false

このプラグインのデバッグログを有効にします。

広告

現時点では、このプラグインでの広告のサポートはIMA3のプレロールのみに制限されています。 その他のタイプの広告やその他の広告ベンダーは現在サポートされていません。

既知の問題点

  • 360°/ VR Pluginはライブストリームで動作しますが、正式にはサポートされていません。
  • 最新の360°/ VR Pluginは、 Brightcove Player バージョン6.17.0以降に対応しています。
  • 360°/ VRプラグインはInternet Explorerでは機能しません。
  • 360°/ VR PluginはDRMをサポートしていません。
  • ステレオスコピック/スタックビデオはプラグインでサポートされていません。
  • モバイルデバイスでは、水平スワイプだけが動作します(これにより、ビューが水平方向に変更されます)。しかし、画面を垂直にスワイプしても何も起こりません。 デスクトップブラウザでは垂直スワイプが機能します。
  • 標準(iframe)実装の Brightcove Player では向きは変わりません。
  • iOSでは、360プラグインがビデオを正しくレンダリングするためにプレーヤーで、 再生前にビデオをプリロードする 設定を はい に設定する必要があります。
    イオスプリロード
  • iOSでは、360°/ VRプラグインがiOSネイティブプレーヤーで動作しないため、フルスクリーンモードボタンは無効になっています。 このため、あなたが設定することをお勧めします playsinline 非フルスクリーンビデオ再生の属性。 iOSと Brightcove Player の資料をご参照ください。

変更履歴

17 9月2018

v1.5.0

  • 新機能:モーションコントロールオプション
  • バグ修正:インストールの問題を防ぐためにpostinstallスクリプトを削除しました。
  • に更新されました generator-videojs-plugin 7.2.0
  • 更新しました videojs-generate-rollup-config バージョン2.2.0へ

8月23 2018

v1.4.7

  • ジェネレータ7の使用

8月8 2018

v1.4.6

  • 更新された依存関係

8月3 2018

v1.4.5

  • 発電機を更新してバベルのES分布

8月1 2018

v1.4.4

  • イベントリスナーをウィンドウに正しく配置する

7月20 2018

v1.4.3

  • 正しくないCSS命名を修正しました

5 7月2018

v1.4.2

  • ジェネレータv6への更新

6月18 2018

v1.4.1

  • バグ修正:VR表示を無効にするとiOSサイズの問題が発生する

6月8 2018

v1.4.0

  • 移動中にコントロールバーを非表示にし、クリックして再生/一時停止を許可し、右クリックを許可する
  • 更新プログラムのロールアップとロールアップ - プラグイン - json

23月2018

v1.3.0

  • 360_CUBE投影を処理するようになりました
  • バグ修正:three.jsの変更による360ビデオのFrontSide - > BackSide
  • バグ修正:回転命令はありません。
  • バグ修正:タッチパネルのコントロールを再実装する
  • バグ修正:Safariビデオイメージキャンバスの回避策を削除
  • バグフィックス:vjs-fluidクラスの使用法、およびremove mutationobserver 回避策
  • 更新しました 巻き上げる バージョン0.58.2へ
  • 更新しました ロールアップ - プラグイン - ラベル バージョン3.0.4へ
  • 更新しました rollup-plugin-commonjs バージョン9.1.3へ
  • 更新しました バージョン0.92.0へ

8月2018

v1.2.1

  • WebVRがサポートされていない場合、IE / Safariでエラーを正しく表示する

月27 2018

v1.2.0

  • バグ修正:更新によるChrome m55 And​​roidジャイロの破損 webvr-polyfill
  • 更新しました 巻き上げる バージョン0.57.1へ

2月20 2018

v1.1.1

  • バージョンを正しく公開する
  • OrbitControls:パンなし、スピード低下、ズームなし
  • ウェブパックを修正するためのリワークの3つのサンプルビルド

月31 2018

v1.1.0

  • レポから3つの不要なJavaScriptファイルを削除
  • バグの修正
    • デフォルトの投影タイプミス
    • ネイティブWebVR
    • Safari HLS

4 Dec 2017

v1.0.3

  • firefox / polyfillディスプレイの問題の回避策の実装

10月19 2017

v1.0.2

  • ステレオモードを実際にステレオにする
  • 恒等記号に関するreadmeの情報を更新しました

8月29 2017

v1.0.1

  • 作りました projection equirectangular   360 同等。

8月24 2017

v1.0.0

  • 段ボールのボタンを強制するオプションが追加されました
  • より多くのVRSメソッドを公開
  • ネイティブwebvrサポートのための段ボールボタンを追加
  • 自動投影ではなく正しい値に設定されている
  • クリーンアップされたウィンドウリスナー
  • コントロールバーの段ボールのボタンが正しくチェックされ、2つが追加されない
  • CSSでsvgをエンコードし、正確なボタンの置き換えサイズを使用する
  • iOSで段ボールのボタンを疑似全画面表示
  • 更新されたピン webvr-polyfill 0.9.23へ
  • 一部のデバイスでピクセル化の問題が修正されました
  • 初期化が2回起こらないようにする
  • CardboardButtonとBigVrPlayButtonを分離してリセットする
  • プレーヤーを使用する fullscreenchange イベントによりSafariでフルスクリーントグルが動作する