360°/VR Video Plugin - Brightcove Player Documentation

Introduction

Features

The following are features of the 360°/VR Plugin:

• Gyroscope integration on mobile devices: The perspective changes as you rotate your phone.
• Cardboard/VR mode support: On devices that support it, the Cardboard viewer icon will appear in the control bar. When pressed, the projection will be adjusted to work with Cardboard-style VR goggles.
• Video Cloud Media 360° Setting: If you are using Video Cloud videos, the plugin respects Video Cloud’s setting for 360° on Video Cloud media. If the value is not present it will play the video as a normal video. You do not have to ensure that only 360° videos are played on players using the 360°/VR Plugin.
• Non-Video Cloud Media: If you are not using media served from Video Cloud, you can still use the plugin. You will need to call the vr plugin passing an object with a projection value set as follows: <script type="text/javascript"> videojs.getPlayer('myPlayerID').ready(function() { var myPlayer = this; myPlayer.vr({projection: '360'}); }); </script> Setting the projection property to 360, equirectangular or Sphere are all logically equivalent.

  Of course, the code above assumes you have included the JavaScript and CSS files for the plugin, as described later in this document.

Browser compatibility

• For best performance across all browsers, you should prefer MP4 renditions over HLS for videos that use this plugin.
• Also, when uploading your video, Brightcove recommends creating a custom Dynamic Delivery ingest profile with a single 1080p rendition and at least one audio rendition.

The plugin is compatible with the latest versions of these major browsers:

• Chrome Desktop
• Chrome Mobile (on Android 6+)
• Firefox Desktop
• Edge
• Safari Desktop *
• Safari Mobile (iOS 11.2+) *

* When using the plugin on Safari, if you are using a non-Video Cloud video (a video NOT ingested via Video Cloud), note that you need to set the crossorigin configuration property to anonymous.

The plugin does NOT work with Internet Explorer.

Implementation overview

Implementing the plugin is straightforward, just complete these two steps:

• Properly ingest the video.
• Add the plugin to the player.