DASH & HLS streaming (Shaka Player)

---

---

Documentation sections

• DASH & HLS support in Radiant Media Player with Shaka Player
• Supported DASH features
• Supported HLS features
• Best practices
• Player code example
• Player settings
• Shaka player ABR & buffer player settings

---

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.

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 (CMAF / fMP4 with H.264 or H.265 video) and WebM (VP8 or VP9 video) 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 or H.265 video in fmp4 fragments (CMAF / fragmented MP4 container)
• Playback of H.264 video in TS fragments ("classic" HLS) with rmp-shaka-mux.min.js build (note: this build must be included explicitly as using rmp.min.js will not cause mux.js to be loaded automatically)
• 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) - requires fmp4 HLS
• 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.

---

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 - here we use the optimised build for Shaka player -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.4.8/js/rmp-shaka.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// Here we pass our DASH streaming source
var src = {
  dash: 'https://your-dash-url.mpd',
  // For older devices and iOS where DASH is not supported, we could provide a MP4 progressive download (or HLS) fallback
  mp4: [
    'https://your-mp4-fallback-url.mp4'
  ]
};
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  poster: 'https://your-poster-url.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

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

<!-- Include Radiant Media Player - here we use the optimised build for Shaka player -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.4.8/js/rmp-shaka.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// Here we pass our HLS streaming source
var src = {
  hls: 'https://your-fmp4-hls-url.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  // Here we tell the player to use Shaka Player for HLS streaming
  hlsEngine: 'shakaplayer',
  poster: 'https://your-poster-url.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

In this example we use HLS TS with Shaka Player:

            <!-- Include Radiant Media Player - here we use the optimised build for Shaka player and mux.js -->
            <!-- note: rmp-shaka-mux.min.js build must be included explicitly as including rmp.min.js 
              will not cause mux.js to be loaded automatically -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.4.8/js/rmp-shaka-mux.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// Here we pass our HLS streaming source
var src = {
  hls: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  // Here we tell the player to use Shaka Player for HLS streaming ...
  hlsEngine: 'shakaplayer',
  poster: 'https://your-poster-url.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
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'.

shakaCapLevelToPlayerSize: Boolean

This setting limits bitrates usable in auto-quality depending on player size (width). Default: true. If set to true, potential rendition width will be compared with the actual player width and only the best match will be used as the maximum available bitrate, hence helping to preserve bandwidth usage while maintaining streaming quality. This setting is ignored in manual mode so all levels can be selected manually. For 360 video this setting is always set to false.

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,
    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: 4.

shakaStartLevel: Number

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.

shakaManifestDashDefaultPresentationDelay: Number

A default presentationDelay if suggestedPresentationDelay is missing in the MPEG DASH manifest, has to be bigger than minBufferTime * 1.5. Default: 10.