360°/VR Video Plugin

Example player

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.

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>

  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

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+) *

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.

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, when uploading your video, Brightcove recommends creating a custom Dynamic Delivery ingest profile with a single 1080p rendition and at least one audio rendition. This 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

To implement the 360°/VR Plugin you will add the name of the plugin and the URLs to the plugin's JavaScript and CSS files:

1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
2. Click the link for the player to open the player's properties.
3. Click Plugins in the left navigation menu.
4. From the Add a Plugin dropdown, select Custom Plugin.

   

5. For the Plugin Name enter vr and click Save. You do not have to enter any options for this plugin.
6. Click on the Stylesheets tab.

   

7. Click Add a Stylesheet and for the CSS URL, enter:

   https://players.brightcove.net/videojs-vr/2/videojs-vr.css

   If you are using Brightcove Player 6, use this URL instead:

             https://players.brightcove.net/videojs-vr/1/videojs-vr.css

8. Click on the Scripts tab.

   

9. Click Add a Script and for the JavaScript URL, enter:

   https://players.brightcove.net/videojs-vr/2/videojs-vr.min.js

   If you are using Brightcove Player 6, use this URL instead:

               https://players.brightcove.net/videojs-vr/1/videojs-vr.min.js

10. Click Save.
11. Click Styling in the left navigation menu.
12. 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.

    

13. To publish the player, click Publish & Embed > Publish Changes.
14. To close the open dialog, click Close.

Options

forceCardboard

Type: boolean Default Value: false

Force the cardboard button to display on all devices.

motionControls

Type: boolean Default Value: true on iOS and Android

Determines whether motion/gyro controls should be enabled.

projection

Type: string Default Value: auto

player.mediainfo.projection

Type: 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.

debug

Type: boolean Default Value: false

Enable debug logging for this plugin.

sphereDetail

Type: Integer Default Value: 32

Sets the number of segments used to render the virtual 3D sphere onto which the 360 video is projected. Example values are 32, 64, 128, 256, and higher numbers increase visual clarity but may result in reduced playback performance, depending on user environment.

Advertising

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.

Known issues

• Mixing VR and non-VR content in the same player is not supported. The recommendation for this kind of viewer experience is to remove and re-create the player as needed. See Brightcove Player Sample: Loading the Player Dynamically
• 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.
• Native HLS captions will not be visible in Safari when the VR plugin is used.
• 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 7.0.0 and later.
• Because the 360°/VR Plugin uses an MP4 rendition, it does not support multiple audio tracks (because browsers do not support multiple audio tracks with MP4s). You can avoid this problem by using ingest profiles that do not include MP4 renditions for 360° videos with multiple audio tracks.
• 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 Preload Video (fastest) 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 playsinline attribute for non-fullscreen video playback, as shown in the iOS and Brightcove Player document.

Changelog

See the changelog here.