Radiant Media Player

360 video PREVIEW



This 360 HLS stream has a 4K rendition - an average of 20 Mbps bandwidth is required to view the stream at best quality.


360 video - aww yeah!

HTML5

This feature is currently in PREVIEW and should not be used outside of demonstration/testing purposes. Feedback is welcome.

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


Supported input format

Radiant Media Player supports playback of 360x180 full spherical video (a.k.a. equirectangular format) through HLS or MPEG-DASH in HTML5 video (H.264 video with AAC audio). This works for live or on-demand video content. Given the nature of spherical video (which can easily scale up to 4K video) using an adaptive bitrate streaming technology is mandatory.


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: latest Chrome, Firefox, MS Edge, Safari (Mac OS) and Opera
  • Mobile: latest Chrome and Firefox on Android 6+

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


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.


Currently unsupported features

More features will be added to Radiant Media Player 360 with time. The following features are currently unsupported:

  • MP4/WebM progressive download
  • Google Cast: 360 content cannot be cast because the receiving device is not equipped with 360 playback capabilities
  • Video ads
  • DVR 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 HLS stream (non-360) can be provided in order to deliver an alternate content where 360 video cannot be rendered by the targeted environments.


Player code example

The above player example has the following setup code:

<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
var bitrates = {
  hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:abr-360-prod.smil/playlist.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  delayToFade: 3000,
  width: 960,
  height: 480,
  // our optimizations for better streaming of 4K content
  hlsJSCapLevelToPlayerSize: true,
  hlsJSStartLevel: -1,
  // our 360 player settings
  video360: true,
  video360FocalLength: 35,
  video360FallbackBitrates: {
    hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
  },
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-360.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>