Virtual reality video documentation

Documentation sections

• Virtual reality video scope of support
  • Supported input format
  • Supported environments
  • Supported features
  • Virtual reality module
• Virtual reality video player settings
• Player code example

Virtual reality video scope of support

Radiant Media Player is committed to supporting the latest innovation in the online video world. As part of this commitment we support VR video (viewable through a head-mounted display) and 360 video in our player.

Supported input format

Radiant Media Player supports playback for VR 180 video (also known as 180 3D video or side by side videos) viewed in a VR headset, through HLS, DASH & progressive download. VR 180 is a video file containing 2 channels of video for the left and right eye, but for only the front facing 180 degree field of view. A more detailed explanation about VR and 360 video formats can be found here.

This works for live or on-demand video content. Given the nature of side by side videos (which can easily scale up to 4K resolution) using an adaptive bitrate streaming like HLS or DASH technology is generally recommended. Example of VR-ready side-by-side video compatible with Radiant Media Player:

Supported environments

In order to provide support for VR 180 video, viewed in the context of a VR headset, Radiant Media Player makes use of the WebXR Device API. We use three.js as VR framework (this framework is publicly available under MIT license).

We support:

• Oculus platform: Oculus browser and Firefox reality for Oculus Go and Oculus Quest
• Daydream platform: Chrome 79+ for Daydream compatible devices
• Google Cardboard platform: Chrome 79+ for Android 5+ for Google Cardboard compatible devices

Supported features

Most player features generally available for Radiant Media Player are available for VR web browsers/platforms. Below is a non-exhaustive list of features you can expect to be available or not when using Radiant Media Player in a VR web browsers/platforms:

(1) Video ads will only be visible when the player is viewed inline. When the player has entered VR mode (immersive-vr), video ads will automatically be discarded.

(2) When Radiant Media Player is used in a supported platform/browser and the WebXR Device API is available, a VR module will appear in the top-right corner. When clicked this module will cause the player to enter fullscreen VR.

(3) Based on platform/browser capabilities only muted autoplay may be available.

Virtual reality player settings

videoVR: Boolean

When set to true this setting will cause the player to enter VR rendering mode (where supported). Default: false.

videoVRFocalLength: Number

Sets the initial FOV (Camera frustum vertical field of view) by focal length in respect to the current film gauge. Default: 75.

Player code example - see this example here

The above player example has the following setup code:

<!-- Include Radiant Media Player - here we use the optimised build for hls.js and VR video -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.11.5/js/rmp-three-hlsjs-xr.min.js"></script>
<div id="rmpPlayer"></div>
<script>
var src = {
  hls: 'https://your-vr-hls-url.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  videoVR: true,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>