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:
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.
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.Media preloading is widely available on desktop browsers - for mobile devices however media preloading requires the following environments:
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:
preload
setting is always set to 'auto'
.preload
setting is always set to
'auto'
.
'auto'
and 'none'
values are available. preload
setting - 'metadata'
value will behave like
'auto'
value. Note that on iOS or iPadOS Safari the 'metadata'
setting will still work as expected.
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.
<script src="https://cdn.radiantmediatechs.com/rmp/7.9.1/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
const src = {
hls: 'https://your-hls-url.m3u8'
};
const 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'
]
}
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>
©2015-2022 Radiant Media Player. All Rights Reserved.