Radiant Media Player

DASH & HLS streaming (Shaka Player)



Documentation sections


DASH & HLS support in Radiant Media Player with Shaka Player

Radiant Media Player supports DASH or HLS streaming with Shaka Player to HTML5 video. Our Shaka Player to HTML5 video implementation relies on media source extensions (MSE). Where media source extensions support is not available (e.g. iOS, older Android) we fallback to native HLS to HTML5 video. It is to be noted that due to the lack of support for media source extensions on iOS we cannot render DASH content on iOS. When neither media source extensions nor native HLS support are available the player may fallback to HLS to Flash. Note that Flash support in Radiant Media Player is deprecated and limited to supporting HLS streaming to Internet Explorer 11 for Windows 7.

If you want to stream DASH content to Radiant Media Player, Shaka Player engine will always be used. For HLS you can either use hls.js or Shaka Player engine (difference in HLS supported features is explained below) and this can be selected through the hlsEngine player setting.


Supported DASH features

  • ISO BMFF (MP4) and WebM content (even in the same manifest)
  • Live and on-demand media content
  • Optimized adaptive bitrate streaming with automatic or manual bitrate selection
  • Multiple-audio tracks
  • Multiple WebVTT or TTML tracks (subtitles/captions)
  • DRM (PlayReady, Widevine, ClearKey)
  • Multiple periods
  • Audio-only
  • Resilience to errors

Generally available features like video ads, JavaScript API or playback rate changes are also supported with DASH to Radiant Media Player.


Supported HLS features

  • Playback of H.264/AAC in fmp4 fragments (fragmented MP4 container) - no HLS with .ts support
  • Live and on-demand media content
  • Optimized adaptive bitrate streaming with automatic or manual bitrate selection
  • Multiple-audio tracks
  • Multiple WebVTT or TTML tracks (subtitles/captions)
  • DRM (Widevine)
  • Resilience to errors

Note that more HLS options are generally available with our hls.js based implementation but Shaka Player engine notably enables support for HLS with DRM content and MSE-based HLS streaming to macOS Safari 9+. Enabling HLS with Shaka Player in Radiant Media Player is done by setting hlsEngine: 'shakaplayer' in your player configuration. So when to use HLS with Shaka Player in Radiant Media Player one may ask?

  • You have live or on-demand video content AND
  • You can provide a fmp4 HLS stream AND/OR
  • You need to support fmp4 HLS with DRM (Widevine)

Best practices

As a rule of thumb Radiant Media Player should work with any-standard compliant DASH or HLS streaming service provider. In order to provide better cross-device support for DASH or HLS streaming to Radiant Media Player we recommend the following:

  • You must set up your streaming server to return proper CORS settings permitting GET requests
  • For H.264 encoded content H.264 Main profile provides best coverage - H.264 Level 5+ (this is for 4K/360 content) encoded content may cause playback issue on older devices so only use it when needed
  • Other general recommendations for streaming content through Shaka player apply

Player code example

In this example we use an ABR multi-codec, multi-audio, multi-captions on-demand DASH stream:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/4.6.31/js/rmp.min.js" 
  integrity="sha384-0e5VoJys67yt6cz1Ibu8uYZquAAscPyK6qP2a/u8FXKlgeC6BO1dM2r8H4asqJCI"
  crossorigin="anonymous"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
var bitrates = {
  dash: 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
  // For older devices and iOS we may provide a MP4 progressive download (or HLS) fallback
  mp4: [
    'https://www.rmp-streaming.com/media/bbb-360p.mp4'
  ]
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>

In this example we use an ABR multi-audio, multi-captions on-demand fMP4 HLS stream:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/4.6.31/js/rmp.min.js" 
  integrity="sha384-0e5VoJys67yt6cz1Ibu8uYZquAAscPyK6qP2a/u8FXKlgeC6BO1dM2r8H4asqJCI"
  crossorigin="anonymous"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
var bitrates = {
  hls: 'https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/master.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  width: 640,
  height: 360,
  // Here we tell the player to use Shaka Player for HLS streaming
  hlsEngine: 'shakaplayer',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg',
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>

Player settings for Shaka Player based streaming

dashFirst: Boolean

When used in conjonction with HLS this setting will tell the player to pick DASH (where supported) as a first choice over HLS (picking HLS as a first choice is the player default). DASH (where supported) is always picked first over MP4/WebM progressive download. Default: false.

hlsEngine: String

Since Radiant Media Player 4.4.0 it is possible to use Shaka Player HLS streaming engine instead of hls.js. While hls.js offers more options using HLS through Shaka player notably provides support for HLS with DRM content. Default: 'hlsjs'. Other possible value is 'shakaplayer'.

shakaStreamingIgnoreTextStreamFailures: Boolean

If true, the player will ignore text stream failures and proceed to play other streams. Default: true.

shakaPreferredAudioLanguage: String

The preferred language to use for audio tracks. If not given it will use the 'main' track. This must be specified as a language code (example: 'en', 'de' or 'pt-BR') and must match a DASH or HLS manifest stream. See https://tools.ietf.org/html/rfc5646 and http://www.iso.org/iso/home/standards/language_codes.htm. Default: ''.

shakaSmallGapLimit: Number

The threshold (in seconds) for a gap to be considered small and jumped automatically. Default: 0.5. See here for more information.

shakaJumpLargeGaps: Boolean

If true, automatically jump large gaps. Default: true. See here for more information.

shakaRetryParameters: Object

This represents an Object to pass to the player to specify specific retry parameters when attempting to load DASH or HLS content. The same retry parameters will apply for fetching DRM, manifest or segment data. More information can be found here. The following example shows the default player parameter that should work for most case-scenario.

shakaRetryParameters: {
  timeout: 0,       // timeout in ms, after which we abort a request; 0 means never
  maxAttempts: 2,   // the maximum number of requests before we fail
  baseDelay: 1000,  // the base delay in ms between retries
  backoffFactor: 2, // the multiplicative backoff factor between retries
  fuzzFactor: 0.5,  // the fuzz factor to apply to each retry delay
}
shakaRestrictions: Object

An object describing application restrictions on what tracks can play. All restrictions must be fulfilled for a track to be playable. If a track does not meet the restrictions, it will not appear in the track list and it will not be played. More information can be found here. The setting is set as follows (replace number with the targeted value).

shakaRestrictions: {
  minWidth: number, // The minimum width of a video track, in pixels.
  maxWidth: number, // The maximum width of a video track, in pixels.
  minHeight: number, // The minimum height of a video track, in pixels.
  maxHeight: number, // The maximum height of a video track, in pixels.
  minPixels: number, // The minimum number of total pixels in a video track (i.e. width * height).
  maxPixels: number, // The maximum number of total pixels in a video track (i.e. width * height).
  minAudioBandwidth: number, // The minimum bandwidth of an audio track, in bit/sec.
  maxAudioBandwidth: number, // The maximum bandwidth of an audio track, in bit/sec.
  minVideoBandwidth: number, // The minimum bandwidth of a video track, in bit/sec.
  maxVideoBandwidth: number // The maximum bandwidth of a video track, in bit/sec.
}
shakaRequestConfiguration: Object

This object allows the player to fine tune the way it request manifest, segment or DRM data. For manifest and segment this setting can be used to make requests with credentials. This will allow cookies in cross-site requests. See here for more information. Example:

shakaRequestConfiguration: {
  manifest: {
    credentials: true
  },
  segment: {
    credentials: true
  }
}

This setting is often used in conjunction with DRM-encrypted content. See our DASH & HLS DRM documentation page for more advanced use-case.

shakaCustomConfig: Object

Allow passing a custom config object to Shaka Player. As such any Shaka Player internal setting can be tuned. Note that this may override any setting previously documented on this page. Default: {}. Example:

shakaCustomConfig: {
  abr: {
    bandwidthDowngradeTarget: 0.95
    bandwidthUpgradeTarget: 0.85
    defaultBandwidthEstimate: 500000
    enabled: true
    switchInterval: 8
  }
};

Refer to this link for more information about Shaka Player configuration.


Shaka player ABR & buffer player settings

DASH and HLS are adaptive bitrate streaming technologies. Hence having a well-tuned ABR logic is paramount to insure a good user experience and reduce bandwidth cost. Radiant Media Player default ABR logic is tuned to work well in most common use-cases seen now-days. The following settings will let you tune the ABR/buffer logic to your environment. Only use those settings if you are trying to address a specific issue and fully understand what they do. Ill-configured ABR/buffer settings may cause a deteriorated user experience. Those settings are only applicable when streaming DASH or HLS through Shaka player in Radiant Media Player, they do not apply when using native HLS or HLS through hls.js (ABR/buffer settings for hls.js are available here).

shakaStreamingBufferBehind: Number

The maximum number of seconds of content that the player will keep in buffer behind the playhead when it appends a new media segment. The player will evict content to meet this limit. Default: 30.

shakaStreamingBufferingGoal: Number

The number of seconds of content that the player will attempt to buffer ahead of the playhead. This value must be greater than or equal to the shakaStreamingRebufferingGoal setting. Default: 20.

shakaStreamingRebufferingGoal: Number

The minimum number of seconds of content that the player must buffer before it can begin playback or can continue playback after it has entered into a buffering state. Default: 2.

shakaAbrDefaultBandwidthEstimate: Number

The default bandwidth estimate to use if there is not enough data available for the ABR logic (in bit/sec). Default: 500000.

shakaBandwidthDowngradeTarget: Number

The largest fraction of the estimated bandwidth we should use. We should downgrade to avoid this. Default: 0.95.

shakaBandwidthUpgradeTarget: Number

The fraction of the estimated bandwidth which we should try to use when upgrading. Default: 0.75.

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