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 (non-360) bitrates object to be used as a fallback.

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

  • DVR content: DVR content will be treated as simple live content
  • Google Cast: casting of 360 video content is not currently possible due to lack of support from the Google Cast SDK
  • Only the 's1' skin is currently available for 360 video. Skin colorization is supported and CSS source files for the 360 UI are also provided.

Dedicated 360 UI

Radiant Media Player 360 video experience comes with an intuitive 360 user interface. You can drag around (or touch around on Android!) or use the navigation menu on the top left corner to watch 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. Accepted values are ranged from 5 to 65. Currently this can only be set when player is init.

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.2.7/js/rmp.min.js" 
  integrity="sha384-C0sSn+J+s5Dqpm+q4b3+LYtSJvBnjJzqVnne0z+m+cWPz2Nkw6pSoBKTkBkt3/R2"
  crossorigin="anonymous"></script>
<div id="rmpPlayer"></div>
<script>
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,
  video360FallbackBitrates: {
    hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
  },
  // This helps selecting the appropriate bitrate at startup
  hlsJSStartLevel: -1,
  // 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);
rmp.init(settings);
</script>

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