360° video

360° 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 360° video in our player.

Supported input format

Radiant Media Player supports playback of 360x180 full spherical video (equirectangular format) through HLS, DASH & progressive download. This format is also known as monoscopic 360° video (usually a 2:1 aspect ratio equirectangular video container, common resolutions include 3840x1920, 4096x2048, 5760x2880 and 7680x3840). A more detailed explanation about 360° video formats can be found here.

This works for live or on-demand video content. Given the nature of spherical video (which can easily scale up to 4K or 8K resolution) using an adaptive bitrate streaming like HLS or DASH technology is recommended.

Supported environments

In order to provide 360° video support Radiant Media Player makes use of WebGL APIs provided by the browser. We use three.js as 3D framework (this framework is publicly available under MIT license). Refer to our compatibility table for a list of supported environments for 360° video on both mobile and desktop devices.

In environments where 360° video rendering is not available the player can be provided with a regular (e.g. non-360°) streaming URL as a fallback.

Generally available player features including video ads & DRM are supported with 360° however the following features are not available:

• Google Cast & AirPlay: casting of 360° video content is not currently possible due to lack of support from the Google Cast and AirPlay SDK

A dedicated 360° video API and various player settings are available to customise the 360° video experience you want to provide to your viewers.

Dedicated 360° UI

Radiant Media Player 360° video experience comes with an intuitive 360° user interface. When the player is hovered you can drag around (or touch around on mobile devices) to move the viewing angle or use the navigation menu on the top left corner to navigate the 360° video content.

360° video player settings

video360: Boolean

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

video360FocalLength: Number

Sets the initial FOV (Camera frustum vertical field of view) by focal length in respect to the current film gauge. By default, the focal length is specified for a 35mm (full frame) camera. Default: 65.

video360MinFocalLength: Number

Sets the minimum FOV (Camera frustum vertical field of view) by focal length in respect to the current film gauge. Default: 25. FOV may be adjusted within the 360° UI menu or through player API.

video360MaxFocalLength: Number

Sets the maximum FOV (Camera frustum vertical field of view) by focal length in respect to the current film gauge. Default: 115. FOV may be adjusted within the 360° UI menu or through player API.

video360InitialLat: Number

Set the initial viewing angle latitude when the player is started. Default: 0. The viewing angle is intended to start at the center of the 360x180 full spherical video.

video360InitialLon: Number

Set the initial viewing angle longitude when the player is started. Default: 0. The viewing angle is intended to start at the center of the 360x180 full spherical video.

video360FallbackSrc: Object

This defines a fallback source object where a fallback streaming data (non-360°) can be provided in order to deliver an alternate content where 360° video cannot be rendered by the targeted environments. This object can hold HLS, DASH or progressive download streaming data as the regular src player setting.

Player code example

The above player example has the following setup code:

<!-- Include Radiant Media Player - here we use the optimised build for hls.js and 360° video -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp-three.min.js"></script>
<div id="rmp"></div>
<script>
const src = {
  hls: 'https://your-360-hls-url.m3u8'
};
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 960,
  height: 480,
  // our 360° player settings
  video360: true,
  video360FallbackSrc: {
    hls: 'https://your-hls-url.m3u8'
  },
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

See a demo of 360° video with Radiant Media Player here.

360° video player API

An example of implementation for the 360° API can be found here.

getCamLat()

rmp.getCamLat();

This getter returns a Number representing the current viewing angle latitude.

getCamLon()

rmp.getCamLon();

This getter returns a Number representing the current viewing angle longitude.

getCamFov()

rmp.getCamFov();

This getter returns a Number representing the current FOV (Camera frustum vertical field of view) by focal length in respect to the current film gauge.

setCamLatLongFov(lat, lon, fov)

rmp.setCamLatLongFov(0, 0, 35);

This method sets viewing parameter for the 360° camera. It takes as input a lat Number (latitude), a lon Number (longitude) and a fov Number (FOV) and updates the 360° viewing angle accordingly.

resetCamLatLongFov()

rmp.resetCamLatLongFov();

This method resets the 360° viewing angle to its initial coordinates (set with video360InitialLat, video360InitialLon and video360FocalLength).