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 with gyrometer-based 360° navigation for mobile devices.

Supported input format

Radiant Media Player supports playback of 360x180 full spherical video (equirectangular format) through HLS, MPEG-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, DVR or on-demand video content. Given the nature of spherical video (which can easily scale up to 8K resolution), using an adaptive bitrate streaming technology like HLS or MPEG-DASH AND a modern codec like AV1 or HEVC is recommended.

Supported environments

To provide 360° video support Radiant Media Player makes use of WebGL APIs provided by the browser (WebGL2 where supported, if not WebGL 1). We use three.js as a 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 (legacy devices) the player can be provided with a regular (e.g. non-360°) streaming URL as a fallback. The player will automatically detect when to use that fallback when provided.

Generally available player features including video ads & DRM are supported with 360° video 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 UI with gyrometer-based 360° navigation for mobile devices, a complete 360° API and various player settings are available to customise the 360° video experience you want to provide to your viewers.

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.

video360MobileGyroOffset : Number

Represents the initial viewing angle (defaults to 45° - around the horizontal axis) when a mobile device is held naturally by a viewer. Default: 45.

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, MPEG-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/10.4.1/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,
    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');
  // Initialization ... and done!
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
    } catch(error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();
</script>

360° video player API

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

cameraView getter|setter (CameraView)

const cameraView = rmp.cameraView;
const lat = cameraView.lat;
const lon = cameraView.lon;
const fov = cameraView.fov;

const newCameraView = {lat: 45, lon: 45, fov: 35};
rmp.cameraView = newCameraView;

get|set the current camera view for 360 video. The camera view object has three properties: lat (latitude), lon (longitude) and fov (FOV). FOV is the Camera frustum vertical field of view by focal length in respect to the current film gauge.