Media preloading

Documentation sections

• Media preloading pros and cons
• Media preloading player settings
• Media preloading on mobile devices
• Media preloading support notes
• Start-up time verification
• Player code example

Media preloading pros and cons

One way to achieve faster start-up time for your content is to enable media preloading in our player. This means that the player will start fetching content as soon as page loads (most of the time preloading is wanted at page load), more precisely with Radiant Media Player this happens when you call init method while using the preload setting.

However enabling media preloading comes at a price for both you and your viewers:

• For your viewers: client-side bandwidth and resources (like battery & CPU) usage will be higher.
• For you: your bandwidth cost for delivering media content may increase.

By default in Radiant Media Player, media preloading is set to minimum ( preload setting set to 'metadata' - see next section) which generally offers a good compromise between faster playback and bandwidth cost.

Media preloading player settings

preload: String

Radiant Media Player supports the HTML5 media preload attribute for MP4/WebM progressive download, HLS and DASH. Accepted values are 'none', 'metadata' and 'auto'. Default: 'metadata'.

• 'none': means no media preloading happens. Media loading starts upon a valid user interaction.
• 'metadata': means only a restricted chunk of content will be preloaded, generally to acquire information like duration, codec information and such.
• 'auto': means media content will be preloaded as much as possible until the player buffer is full. For MP4/WebM progressive download and native HLS, the browser is in charge of determining the player buffer length. For hls.js-based streaming maximum buffer length can be set with hlsJSMaxBufferLength and for Shaka player-based streaming with shakaStreamingBufferingGoal

Media preloading on mobile devices

With Radiant Media Player 5.7.2 release we support media preloading in the following mobile enviornments:

• iOS 13.2+ Safari
• Chrome 64+ for Android 5+
• Samsung Internet 10+ for Android 5+

Media preloading support notes

Media preloading may not always be welcomed by an OS/device. Typically on Chrome for Android media preloading is disabled by the OS when viewer is on a cellular network. Radiant Media Player enforces the following rules in order to follow best practices with media preloading:

• When autoplay is requested preload setting is always set to 'auto'.
• When using Apple FairPlay streaming preload setting is always set to 'auto'.
• When using media preloading with Shaka player or hls.js only the 'auto' and 'none' values are available for preload setting - 'metadata' value will behave like 'auto' value.

Start-up time verification

Radiant Media Player analytics API exposes a getStartUpTime method which can be used to track your average player start-up time for a given set up and content. This can be useful to best determine what preloading strategy works for you.

Player code example

<script src="https://cdn.radiantmediatechs.com/rmp/5.10.2/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
var src = {
  hls: 'https://your-hls-url.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  // Here we enable preloading - in this case we use the 'auto' value
  preload: 'auto',
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>