サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

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

    このトピックでは、このプラグインが正しく記録されたビデオ要素をHTML5パノラマの360ºビデオに変換する方法を学びます Brightcove Player.

    例 player

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

    賃貸システムの概要

    特徴

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

    • モバイル機器へのジャイロスコープの統合:あなたの携帯電話を回転させるとパースペクティブが変化します。
    • 段ボール/ VRモードのサポート:それをサポートするデバイスでは、コントロールバーにCardboardビューアのアイコンが表示されます。 押されると、投影はCardboardスタイルのVRゴーグルで動作するように調整されます。
    • Video Cloud メディア360°設定:使用している場合 Video Cloud ビデオ、プラグインの尊重 Video Cloudの360°の設定 Video Cloud メディア。 値が存在しない場合、ビデオは通常のビデオとして再生されます。 360°動画のみが再生されることを確認する必要はありません player■360°/ VRプラグインを使用する。
    • また、Video Cloud メディア: あなたがいる場合 提供元のメディアを使用していない 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°ビデオを取り込む

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

    ビデオの一部を表示する

    ビデオのごく一部のみが player いつでも、低品質のレンディションに降格することなく、非常に高品質のレンディションを再生する必要があります。 本質的に、あなたはビデオの一部を「ズームイン」しており、低品質のレンディションは非常に低品質の視聴体験をもたらします。 このため、取り込みプロセスでは、高品質で少数のレンディションの取り込みプロファイルを使用する必要があります。 Brightcove の使用をお勧めします 単一ビットレート高(2レンディション) 360°の動画の取り込みプロファイル。 このプロファイルには、高品質のMP4表現が含まれています。これは、360°/ VRプラグインを使用する場合のHLS表現よりも優先されます。

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

    ビデオの一部を表示する

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

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

    1. Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
    2. リンクをクリックすると player を開く playerのプロパティ。
    3. ナビゲーションヘッダーの プラグイン 左側のナビゲーションメニュー。
    4. 次にクリック プラグイン XNUMXつのオプションから。
      プラグインを選択
    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. 公開するには player、クリック 公開と埋め込み>変更の公開.
    14. 開いているダイアログを閉じるには、 閉じる.

    オプション

    forceCardboard

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

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

    motionControls

    タイプ: boolean デフォルト値:iOSおよびAndroidではtrue

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

    投影

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

    ビデオタイプ projection オプション
    360, or 正距円筒
    キューブ キューブ or 360_CUBE
    360°ビデオではありません なし
    現在のビデオが360°ビデオかどうかを確認するには player.mediainfo.projection AUTO
    並んでいる360°ビデオ 360_LR
    上から下への360°ビデオ 360_TB

    player.mediainfo.projection

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

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

    debug

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

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

    Advertising

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

    既知の問題点

    • iOS 13では、アプリはユーザーにデバイスの動きと向き(ジャイロスコープ)機能を使用する許可を求めます。 開発者は、Permission APIを使用してこの機能を実装する必要があります。 Appleの 許可のリクエスト 詳細はドキュメント。
    • Safari 12.xでは、モバイルデバイスのジャイロスコープ統合はデフォルトでオフになっています。 の モーションおよびオリエンテーションアクセス ジャイロ機能を機能させるには、設定を変更する必要があります。
    • 360°/ VR Pluginはライブストリームで動作しますが、正式にはサポートされていません。
    • 最新の360°/ VRプラグインは、 Brightcove Player バージョン6.17.0以降。
    • 360°/ VRプラグインはMP4レンディションを使用しているため、 Studio上ではサポートされていません。 複数のオーディオトラックをサポートします(ブラウザはMP4で複数のオーディオトラックをサポートしていないため)。 複数のオーディオトラックを含む4°ビデオのMP360レンディションを含まない取り込みプロファイルを使用することで、この問題を回避できます。
    • 360°/ VRプラグインはInternet Explorerでは機能しません。
    • 360°/ VR PluginはDRMをサポートしていません。
    • ステレオスコピック/スタックビデオはプラグインでサポートされていません。
    • モバイルデバイスでは、水平スワイプだけが動作します(これにより、ビューが水平方向に変更されます)。しかし、画面を垂直にスワイプしても何も起こりません。 デスクトップブラウザでは垂直スワイプが機能します。
    • 標準(iframe)の実装 Brightcove Player 向きは変わりません。
    • iOSでは、360°プラグインが正しくビデオをレンダリングするために 再生前にビデオをプリロードする 設定はに設定する必要があります ビデオのプリロード(最速) player:
      イオスプリロード
    • iOSでは、360°/ VRプラグインはiOSネイティブでは機能しないため、フルスクリーンモードボタンは無効になります。 player。 このため、設定することをお勧めします playsinline 非フルスクリーンビデオ再生の属性。 iOSと Brightcove Player の資料をご参照ください。

    変更履歴

    見ます 変更履歴はこちら.


    ページの最終更新日:28年2020月XNUMX日