Radiant Media Player

360 video documentation



360 video documentation sections


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 generally 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 10+ for macOS
  • Mobile: Chrome & Firefox on Android 6+, Safari & Chrome on iOS 10+

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

In environments where 360 video rendering is not available (Internet Explorer, older Android & iOS versions) the player can be provided with a regular (e.g. non-360) streaming URL as a fallback.

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

  • 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: 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. 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: 65. FOV may be adjusted within the 360 UI menu or through player API.

video360MoveSpeedFactor: Number

Sets the speed factor when the 360 player is in mousemove or touchmove mode (free camera movement). Higher values will augment the amplitude of the camera movement when the mouse/touch move mode is enabled but may cause a less fluid experience. the Default: 0.2.

video360ArrowMoveFactor: Number

Sets the movement amplitude of the directional arrows when interacted with (available within the 360 UI at the top left corner of the player). Default: 12.

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: 180. The viewing angle is intended to start at the center of the 360x180 full spherical video.

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.


iOS specific considerations

Since Radiant Media Player 4.5.0 we support 360 video on iOS 10+. However this comes with iOS-based limitations:

  • Only MP4 progressive download is currently supported. We hope to add HLS support soon.
  • Fullscreen is not available as Apple does not allow custom HTML5 player in fullscreen mode and the default Apple player does not support 360 video.
  • For iOS 10 support you will need to use a same origin MP4 URI. This is related to a HTML5 video cross-origin bug that was fixed in iOS 11.

Player code example

The above player example has the following setup code:

<script src="https://cdn.radiantmediatechs.com/rmp/4.5.8/js/rmp.min.js" 
  integrity="sha384-N8iccZx4+o/JQEudKK8sDITl0HDIppkYGCW9hAuTu8vIfjfUKAY6Hi20rDh5Q22g"
  crossorigin="anonymous"></script>
<div id="rmpPlayer"></div>
<script>
var bitrates = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:abr-360-prod.smil/playlist.m3u8',
  // This is for iOS 11 support
  mp4: [
    'https://rmp-streaming.com/media/360/ts-med-prod.mp4'
  ]
  // If you want iOS 10 support - we need to use same origin streaming URI
  //mp4: [
    //'media/360/ts-med-prod.mp4'
  //]
};
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'
  },
  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.


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).

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.