Radiant Media Player

360 video documentation

360 video scope of support

Radiant Media Player is committed to supporting the latest innovation in the online video world. We are pleased to announce full support of 360 video with Radiant Media Player 4.

Supported input format

Radiant Media Player supports playback of 360x180 full spherical video (a.k.a. equirectangular format) through HLS, DASH & progressive download. This works for live or on-demand video content. Given the nature of spherical video (which can easily scale up to 4K resolution) using an adaptive bitrate streaming like HLS or DASH technology is highly 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). Here are the supported environments in order to playback 360 video with Radiant Media Player:

  • Desktop: Chrome, Firefox, MS Edge, Opera, Vivaldi & Safari for macOS
  • Mobile: Chrome and Firefox on Android 6+

Specifically we support the latest available release of the above browsers.

At the moment 360 video is not supported on iOS due to OS restrictions. In environments where 360 video rendering is not available (iOS, Internet Explorer ...) the player can be provided with a regular (e.g. non-360) streaming URL as a fallback.

All player features including video ads, DRM & player API are supported with 360 video with the following exceptions:

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

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 Android!) 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 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: 35.

video360MinFocalLength: Number

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

video360MaxFocalLength: Number

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

video360Fps: Number

Sets the frame rate for the 360 video content. It is best to explicitely set this value to avoid additional computation at run time. Default: 24.

video360FallbackBitrates: Object

This defines a fallback bitrate 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 bitrates player setting.

Player code example

The above player example has the following setup code:

<script src="https://cdn.radiantmediatechs.com/rmp/4.4.19/js/rmp.min.js" 
<div id="rmpPlayer"></div>
var bitrates = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:abr-360-prod.smil/playlist.m3u8'
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  delayToFade: 3000,
  width: 960,
  height: 480,
  // our 360 player settings
  video360: true,
  video360FocalLength: 35,
  video360Fps: 25,
  video360FallbackBitrates: {
    hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
  // Do NOT cap to player size for 360 video
  hlsJSCapLevelToPlayerSize: false,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-360.jpg'
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);

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