Radiant Media Player supports progressive download in MP4 (H.264/AAC) & WebM (VP9/opus) containers to HTML5 video and M4A (AAC), MP3 or OGG (opus) containers to HTML5 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 more use-cases.
When using progressive download the fetching of media content is completely left to the browser. Progressive download is only available for on-demand media content delivery. In order to maximise compatibility across devices it is recommended to provide both a MP4 and a WebM rendition for your content.
Generally available features like video ads, JavaScript API or playback rate changes are also supported with progressive download to Radiant Media Player. When multiple MP4/WebM files are provided to the player it will display a manual rendition
selection menu. There will be no automatic adaptation logic between those files with progressive download - it is up to the viewer to opt for a specific rendition. 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/9.12.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 H264/AAC in MP4 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: src, width: 640, height: 360, // We define custom names to be displayed in the player UI for each quality track customTrackNames: { quality: ['Quality 1', 'Quality 2', 'Quality 3'] }, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script>
initialBitrate: Number
This setting tells the player which MP4/WebM bitrate 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 if 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: 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');
rmp.init(settings);
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: 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');
rmp.init(settings);
©2015-2023 Radiant Media Player. All Rights Reserved.