Documentation

Progressive Download Streaming

Scope of support

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.

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/9.14.1/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>

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,
  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);
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

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