Media preloading

Documentation sections

• Media preloading pros and cons
• Media preloading player settings
• Media preloading specific use-cases
• Start-up time verification
• Player code example

Media preloading pros and cons

You probably have heard it somewhere: low start-up time is key to growing and keeping an audience. This is true, who wants to wait 10 seconds for content playback to start in 2018?

One way to achieve faster start-up time for your content is to enable media preloading in your 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 an appropriate preload value.

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. This may also cause a slower page load.
• For you: your bandwidth cost will increase, which may become a concern with expansive services like cloud-streaming or CDN services.

By default in Radiant Media Player, media preloading is disabled ( preload setting set to 'none' - see next section). You should opt in a more permissive media preloading when needed based on your project requirements.

Media preloading player settings

preload: String

Radiant Media Player supports the HTML5 media preload attribute for MP4/WebM progressive download, hls.js and native HLS (native HLS is mainly used for iOS/macOS Safari). Accepted values are 'none', 'metadata' and 'auto'. Default: 'none'.

• '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 and such - this generally acts as a good compromise between faster start-up time and cost-savings.
• '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 player buffer maximum length can be set with hlsJSMaxBufferLength (defaults to 30 seconds of content).

Media preloading specific use-cases

Much like autoplay, media preloading is not always welcome 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:

• On mobile devices preload setting is always set to 'none'. This is to avoid unexpected data charge for your viewers.
• When autoplay is requested preload setting is always set to 'auto'.
• preload setting is always set to 'none' with Radiant Media Player deprecated Flash fallback.
• When using Apple FairPlay streaming preload setting is always set to 'auto'.
• Media preloading tuning is currently not available when using Shaka Player with Radiant Media Player and preload setting is always set to 'none' in such use-case.

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/4.7.4/js/rmp.min.js" 
  integrity="sha384-Kb/KAbDJDP4azHeoa+2bXM3OEQATca+Br/FQ/V3LBdZX0lbm+Oes8Y6bBjn2qlSt"
  crossorigin="anonymous"></script>
<div id="rmpPlayer"></div>
<script>
var bitrates = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  width: 640,
  height: 360,
  // Here we enable preloading - in this case we use the 'metadata' value
  preload: 'metadata',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>