Radiant Media Player supports progressive download in MP4 & WebM containers to HTML5 video and M4A, MP3 or OGG containers to HTML5 audio. For video streaming in MP4 container, the player expects H.264 video and AAC-LC audio. For video streaming in WebM container, the player expects vp9 video and Opus audio. We also support more modern codecs with progressive download - see the Multi-codecs support section. For audio-only streaming please refer to our audio-only documentation page.
Whenever possible we recommend using an adaptive streaming technology (HLS or MPEG-DASH) over progressive download as an adaptive streaming technology will provide a better viewing experience for your audience. That being said progressive download remains available with Radiant Media Player to satisfy even more use-cases.
When using progressive download the fetching of media content is completely left to the device. Progressive download is only available for on-demand media content delivery.
When multiple MP4/WebM source files are provided to the player, it will display a quality icon for manual
quality selection by the viewer. UI labels for the quality tracks can be set with
customTrackNames setting.
See our compatibility table for a list of environments where progressive download is supported with Radiant Media Player.
In this example we use a combination of MP4/WebM for on-demand video:
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/10.2.0/js/rmp.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <!-- Set up player configuration options --> <script> // Here we pass our MP4 streaming sources - we can pass different renditions at various quality // We may also provide WebM sources as a fallback for devices where MP4 container is not supported const src = { mp4: [ 'https://your-mp4-sd-url.mp4', 'https://your-mp4-hd-url.mp4', 'https://your-mp4-full-hd-url.mp4' ], webm: [ 'https://your-webm-sd-url.webm', 'https://your-webm-hd-url.webm', 'https://your-webm-full-hd-url.webm' ] }; const settings = { licenseKey: 'your-license-key', src, width: 640, height: 360, // We define custom names to be displayed in the player UI for each quality track customTrackNames: { quality: ['Low Quality', 'Medium Quality', 'High Quality'] }, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); // Initialization ... and done! async function initRmpPlayer() { try { await rmp.init(settings); } catch(error) { console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script>
initialQuality: Number
This setting tells the player which MP4/WebM quality to select when player
loads. It represents the index from the related src.mp4 or src.webm array. Default:
0 (which is the first item from the src.mp4 or src.webm array).
For progressive download the player assumes the following:
How to tell the player that a different combination of codecs is available in this case? Indeed the player also supports the following codecs:
In that case we will need to detect before player set up the supported codecs by the client-device.
pdCheckCodecsDone: Boolean
This setting disables internal codecs support testing for progressive download, so we can
build our own detectection logic before player set up. Default: false.
Example for a MP4 container:
const testVideoTag = document.createElement('video');
let src = {};
const hevcHeAACv2Src = 'https://www.rmp-streaming.com/media/pd/hevc-338p.mp4';
const av1HeAACv2Src = 'https://www.rmp-streaming.com/media/pd/av1-338p.mp4';
const vp9HeAACv2Src = 'https://www.rmp-streaming.com/media/pd/vp9-338p.mp4';
if (testVideoTag.canPlayType('video/mp4; codecs="hvc1.1.6.L93.B0, mp4a.40.29"')) {
src.mp4 = hevcHeAACv2Src; // HEVC video with HE-AACv2 audio
} else if (testVideoTag.canPlayType('video/mp4; codecs="av01.0.00M.08, mp4a.40.29"')) {
src.mp4 = av1HeAACv2Src; // AV1 video with HE-AACv2 audio
} else if (testVideoTag.canPlayType('video/mp4; codecs="vp09.00.10.08, mp4a.40.29"')) {
src.mp4 = vp9HeAACv2Src; // VP9 video with HE-AACv2 audio
}
// Player settings
const settings = {
licenseKey: 'your-license-key',
src,
width: 640,
height: 360,
customTrackNames: {
quality: ['Quality 1']
},
pdCheckCodecsDone: true // Here we tell the player to ignore internal codecs check
};
const rmp = new RadiantMP('rmp');
// Initialization ... and done!
async function initRmpPlayer() {
try {
await rmp.init(settings);
} catch(error) {
console.error('Radiant Media Player failed to initialize', error);
}
}
initRmpPlayer();
Example for a WebM container:
const testVideoTag = document.createElement('video');
let src = {};
const vp9OpusSrc = 'https://www.rmp-streaming.com/media/pd/vp9-opus-338p.webm';
const vp8Vorbis2Src = 'https://www.rmp-streaming.com/media/pd/vp8-vorbis-338p.webm';
if (testVideoTag.canPlayType('video/webm; codecs="vp9, opus"')) {
src.webm = vp9OpusSrc; // VP9 video with opus audio
} else if (testVideoTag.canPlayType('video/webm; codecs="vp8, vorbis"')) {
src.webm = vp8Vorbis2Src; // VP8 video with vorbis audio
}
// Player settings
const settings = {
licenseKey: 'your-license-key',
src,
customTrackNames: {
quality: ['Quality 1']
},
width: 640,
height: 360,
pdCheckCodecsDone: true // Here we tell the player to ignore internal codecs check
};
const rmp = new RadiantMP('rmp');
// Initialization ... and done!
async function initRmpPlayer() {
try {
await rmp.init(settings);
} catch(error) {
console.error('Radiant Media Player failed to initialize', error);
}
}
initRmpPlayer();
©2015-2025 Radiant Media Player. All Rights Reserved. ✝