360°/VR Video Plugin
The sample video below demonstrates the use of the 360°/VR Plugin. Once you click on the video to play it, you can use either your mouse or the arrow keys to control the view on the desktop, or the gyroscope if viewing on a mobile device. The 360° video logo play button disappears on play.
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
vrplugin passing an object with a
projectionvalue set as follows:
The plugin is compatible with the latest versions of these major browsers:
- Chrome Desktop
- Chrome Mobile (on Android 6+)
- Firefox Desktop
- Safari Desktop
- Safari Mobile (iOS 11.2+)
The plugin does NOT work with Internet Explorer.
You should be aware of the following when using the 360°/VR Plugin:
- MP4 video renditions are preferred over HLS for videos that use this plugin.
- Single Bitrate: You must select Single Bitrate High as the ingest profile for 360° videos. This is because 360°/VR playback only shows a small portion of the frame at a time (more details on this appear in the next section of this document). Any other setting will result in very poor quality. If you are not using Video Cloud, we recommend you use a single high-resolution HLS rendition or MP4 video in order to disable rendition switching.
Implementing the plugin is straightforward, just complete these two steps:
Ingest the 360° video
Once you have the 360° video recorded, you need to ingest it into Video Cloud. A little understanding of how 360° video works will help you understand some reasons for the Ingest Profile to choose. The 360° video is filmed to be projected on the interior of a sphere. This means that the visible area of the video in the player is only a fraction of the entire video. The following screenshot gives you a rough idea of this concept. The area inside the red rectangle is what is visible in the player, but only a small part of the entire video.
Since only a small part of the video will be in the player at any one time, you want a very high quality rendition to be playing, with no chance of stepping down to a lower quality rendition. In essence, you are "zooming in" on part of the video and a poor quality rendition would yield a very poor quality viewing experience. For this reason, during the ingestion process you should use an Ingest Profile of high-quality, and few renditions. Brightcove recommends using the single-bitrate-high (2 renditions) Ingest Profile for 360° videos. This profile includes a high quality MP4 rendition, which is preferred over HLS renditions when using the 360°/VR Plugin.
Be sure when the video is ingested it is marked for 360° projection, as shown here in the video's information section:
Implement using Players module
- Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
- Click the link for the player to open the player's properties.
- Click Plugins in the left navigation menu.
- Next click Plugins from the three options.
- From the Add a Plugin select Custom Plugin.
- For the Plugin Name enter vr.
- For the CSS URL, enter:
- You do not have to enter any options for this plugin.
- Click Save.
- Click Styling in the left navigation menu.
- If you feel it will be a better viewing experience, you can disable the title and description dock. To do this, uncheck the Show title and description checkbox.
- To publish the player, click Publish & Embed > Publish Changes.
- To close the open dialog, click Close.
boolean Default Value: false
Force the cardboard button to display on all devices.
boolean Default Value: true on iOS and Android
Determines whether motion/gyro controls should be enabled.
string Default Value: auto
|Video Type||Value for
|sphere||360, Sphere or equirectangular|
|cube||Cube or 360_CUBE|
|NOT a 360° video||None|
|If you want to check if the current video is a 360° video via
|Side-by-side 360° video||360_LR|
|Top-to-bottom 360° video||360_TB|
string Default Value: undefined
This value should be set on a source-by-source basis to turn 360° videos on an off depending upon the video.
boolean Default Value: false
Enable debug logging for this plugin.
At this time support for advertising in this plugin is limited to IMA3 pre-rolls only. Other types of ads and other ad vendors are not currently supported.
- On iOS 13 the app will ask the user for permission to use the device motion and orientation (gyroscope) functionality. Developers must use the Permission API to implement this functionality. See Apple's Requesting Permission document for more information.
- In Safari 12.x the gyroscope integration for mobile devices is turned off by default. The Motion & Orientation Access settings must be changed in order for the gyro feature to function.
- Although the 360°/VR Plugin may work with live streams, it is not officially supported.
- The latest 360°/VR Plugin is compatible with Brightcove Player version 6.17.0 and later.
- The 360°/VR Plugin does not function with Internet Explorer.
- The 360°/VR Plugin does not support DRM.
- Stereoscopic/stacked videos are not supported by the plugin.
- On mobile devices only horizontal swiping works (this changes the view horizontally), but swiping the screen vertically does not do anything. The vertical swiping does work for desktop browsers.
- The Standard (iframe) implementation of Brightcove Player will NOT change orientation.
- On iOS, for the 360° plugin to render videos correctly the Preload Video Before Playback setting must be set to Yes in the player:
- On iOS, the fullscreen mode button is disabled since the 360°/VR Plugin does not work with the iOS native player. Because of this, it is recommended that you set the
playsinlineattribute for non-fullscreen video playback, as shown in the iOS and Brightcove Player document.
See the changelog here.