Documentation

Progressive Download Streaming

Scope of support

Radiant Media Player supports progressive download in MP4 (H.264/AAC or H.265/AAC) & WebM formats (VP8/VP9 video with Vorbis/Opus audio) to HTML5 video and M4A (AAC), MP3 or OGG (Vorbis/Opus) formats to HTML5 audio. For audio-only streaming please refer to our audio-only documentation page.

Whenever possible we recommend using an adaptive streaming technology (HLS or DASH) over progressive download as an adaptive streaming technology will provide more playback options, save bandwidth and offer an overall better viewing experience for your audience. That being said progressive download remains a widely used method of delivering media content to web environments so Radiant Media Player fully supports this method of delivery.

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 media to the player where possible.

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.

Supported environments

See our compatibility table for a list of environments where progressive download is supported with Radiant Media Player.

Player code example

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/7.11.5/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,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

Player settings

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).

Multi-codecs support

For progressive download the player assumes the following:

  • If it is MP4 the player assumes H.264 video and AAC-LC audio codecs (codecs="avc1.42E01E,mp4a.40.2") will be provided
  • If it is WebM the player assumes VP9 video and opus audio codecs (codecs="vp9,opus") will be provided

How to tell the player that a different combination of codecs if available in this case? Indeed the player also supports the following codecs:

  • Video: AVC (H.264), HEVC (H.265), AV1, VP8 & VP9
  • Audio: AAC (including AAC-LC & HE-AAC), MP3, Vorbis, Opus, AC-3, EC-3

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,
  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,
  width: 640,
  height: 360,
  pdCheckCodecsDone: true // Here we tell the player to ignore internal codecs check
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2022 Radiant Media Player. All Rights Reserved.