Documentation

Progressive Download Streaming

Scope of support

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.

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

Player settings

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

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

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