Radiant Media Player

DASH & HLS with Shaka Player



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 can fallback to HLS to Flash. Hopefully this last case scenario has become rare (mainly older versions of Internet Explorer) since Flash is now an outdated solution for displaying media content in the industry (read our deprecating Flash support article for more information).

If you want to stream DASH content to Radiant Media Player, Shaka Player engine will be used. For HLS you can either use hls.js or Shaka Player engine (difference in HLS supported features is explained below).


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.

By default the player expects a DASH manifest to expose both MP4 (H.264 with AAC) & WebM (VP9 with Vorbis) content. Wherever possible DASH WebM will be preferred over DASH MP4. If you are using DASH with MP4 only or WebM only content please refer to the dashMimeType setting below for best device coverage.

Currently unsupported features:

  • Offline content playback

Supported HLS features

Support for HLS in Shaka Player is still very new as of July 2017 and only a limited set of the HLS specification is currently supported:

  • Playback of H.264/AAC in fmp4 fragments (fragmented MP4 container)
  • On-demand media content (no live support currently)
  • Optimized adaptive bitrate streaming with automatic or manual bitrate selection
  • Multiple-audio tracks
  • Multiple WebVTT or TTML tracks (subtitles/captions)
  • DRM (PlayReady, Widevine, ClearKey)
  • Resilience to errors

Note that more HLS options are 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 on-demand video content
  • You need to support HLS with fmp4 fragments
  • You need to support HLS with DRM (PlayReady, Widevine, ClearKey)

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


Supported environments

See our compatibility table for a list of environments where DASH & HLS streaming are supported with Radiant Media Player.


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 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.4.4/js/rmp.min.js" 
  integrity="sha384-KfgOHL+uRs3rPCnZledCYzAuPc3+eu4j6DQzjQH8370JtLm2QhZzZSlZ4r9OfCtK"
  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 an MP4 progressive download fallback
  mp4: [
    'https://www.rmp-streaming.com/media/bbb-360p.mp4'
  ]
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg',
  // The below settings are not always necessary - they are displayed as an example
  // the displayed values are the default player values
  dashMimeType: {
    mp4: true,
    webm: true
  },
  webmCodecs: {
    video: 'vp9',
    audio: 'vorbis'
  }
};
// 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.4.4/js/rmp.min.js" 
  integrity="sha384-KfgOHL+uRs3rPCnZledCYzAuPc3+eu4j6DQzjQH8370JtLm2QhZzZSlZ4r9OfCtK"
  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,  
  delayToFade: 3000,
  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.

dashMimeType: Object

By default the player expects a DASH manifest to expose both MP4 (H.264 with AAC) & WebM (VP9 with Vorbis) content. If this is your use-case you do need to set the dashMimeType setting - the default value will work great. Wherever possible DASH WebM will be preferred over DASH MP4. If your DASH manifest does not include both MP4 & WebM content, or if your DASH manifest has a WebM codecs set other than VP9/Vorbis, you must give this information to the player up-front so that it can fallback to other streaming protocols like HLS or progressive download. If you do not provide HLS or progressive download alternatives (this is not recommended) to the player then setting dashMimeType is not necessary. Default:

dashMimeType: {
  mp4: true,
  webm: true
}

When dashMimeType.webm is set to true and your DASH manifest has WebM codecs data other than VP9/Vorbis the player also expects a webmCodecs setting to be set. The webmCodecs is an Object set has:

webmCodecs: {
  video: 'vp9',
  audio: 'vorbis'
}

webmCodecs.video must be either 'vp8' or 'vp9'. webmCodecs.audio must either be 'vorbis' or 'opus'.

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

shakaAbrDefaultBandwidthEstimate: Number

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

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.

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: ''.

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.

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.

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