Documentation

Radiant Media Player

4K, HEVC, AV1, AC-3 & EC-3 support

4K video (UHD) done right

4K (a.k.a. UHD) video allows for a new and improved viewer experience. Radiant Media Player provides a smart and configurable approach to 4K - UHD video rendering for both HLS and DASH.

4K video is best delivered with an adaptive bitrate streaming technology, like HLS or DASH. While it is technically possible to deliver 4K content with progressive download through Radiant Media Player, this is likely to cause playback issues for your viewers and generally not recommended. You can deliver 4K content with Radiant Media Player for on-demand, live or DVR video streaming.

Proper delivery of 4K video generally require the use of several video codecs, for example:

  • HEVC (H.265) video with fallback to AVC (H.264) video (where HEVC video is not supported)
  • VP9 video with fallback to AVC (H.264) video (where VP9 video is not supported)

Two options are available to mix those codecs:

  • HLS/DASH manifest holding HEVC, VP9 and/or AVC variants
  • Use a combination of hls and hlsHevc properties of the src setting

In both cases, the player will automatically pick the right video codec based on device capabilities. Refer to our HEVC docs for more information. For reference here is an example of DASH manifest mixing 4K VP9 and AVC video.

4K content decoding requirements:

  • High-end recent multi-core processor
  • 4K-compatible video card
  • An Internet connection that can consistently maintain an average of 15-20 Mbps download speed
Player code example - see this example here
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/6.4.10/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<script>
  var src = {
    // This DASH stream holds UHD content in both VP9 and H.264 video
    dash: 'https://storage.googleapis.com/shaka-demo-assets/sintel/dash.mpd',
    // This is for older Apple devices where HEVC is not supported
    hls: 'https://5b44cf20b0388.streamlock.net:8443/vod/sintel-hd.smil/playlist.m3u8',
    // For newer Apple devices where HEVC is supported (Safari 11+)
    hlsHevc: 'https://www.rmp-streaming.com/media/hls/fmp4/hevc/playlist.m3u8'
  };
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 948,
    height: 404,
    dashFirst: true,
    skin: 's3',
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

HEVC support

Radiant Media Player relies on the device it runs on to provide HEVC decoding support to render HEVC content with HTML5 video. This is true for native HTML5 video rendering (e.g. native HLS on Apple devices) or through media source extensions (HLS, DASH). Currently the following environments are supported:

  • iOS 12+ Safari (HLS only)
  • iPadOS 13+ Safari
  • iOS 12+ & iPadOS 13+ WebView-based mobile apps (inlcuding Cordova/Ionic apps)
  • Safari 11+ for macOS
  • MS Edge Legacy for Windows 10 (HEVC is not currently supported in Chromium-based MS Edge 79+)
  • Google Cast
  • AirPlay (HLS only)
  • Oculus browser for Oculus platform
  • Samsung Smart TV
  • Xbox one+

Because HEVC decoding support may not be available on all devices it is likely you will need to use a combination of HEVC & AVC encoded content to reach the whole OTT sphere. You have 2 options:

Option 1: HLS/DASH manifest holding both HEVC & AVC variants. When both HEVC & AVC variants are available in a HLS/DASH manifest the player will automatically pick the appropriate format based on device capabilities.

Option 2: use a combination of hls & hlsHevc properties of the src object. For newer devices that support HLS (CMAF/fmp4) with HEVC the src.hlsHevc URL will be used and for devices that do not support HLS (CMAF/fmp4) with HEVC but do support classic HLS-TS with AVC the src.hls URL will be used. The player will automatically pick the appropriate format based on device capabilities.

Player setting examples for HEVC support - see this example here

Example of src object for HLS with option 2:

var src = {
  hlsHevc: 'https://your-hls-hevc-url.m3u8',
  hls: 'https://your-hls-avc-url.m3u8'
};

AV1 support

AOMedia Video 1 (AV1) is an open, royalty-free video coding format designed for video transmissions over the Internet. It is being developed by the Alliance for Open Media (AOMedia), a consortium of firms from the semiconductor industry, video on demand providers, and web browser developers, founded in 2015. The AV1 bitstream specification includes a reference video codec. It succeeds VP9. It can have 20% higher data compression than VP9 or HEVC/H.265 from the Moving Picture Experts Group and about 50% higher than the widely used AVC.

As of June 2021 we support AV1 video support in:

  • AV1 with MP4 progressive-download
    • Chrome 70+ for desktop and Android 5+
    • MS Edge 79+ for desktop
    • Firefox 67+ for desktop (no Android support)
    • Opera 62+ for desktop and Android 5+
    • Samsung Internet 13+ for Android 5+
  • DASH AV1
    • Firefox 67+ for desktop

This table can give more complete information.

A guide for encoding video with AV1 codec and FFmpeg can be found here.

Player code example for MP4/AV1 progressive download - see this example here

In order to determine AV1 video support we will use the canPlayType player method as described here.

<script src="https://cdn.radiantmediatechs.com/rmp/6.4.10/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
  // First we create our Radiant Media Player instance
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  // We can then gain access to the getEnvironment API method
  var env = rmp.getEnvironment();
  // We define 2 source objects, one with AV1/AAC and the other with H.264/AAC
  var src;
  var avcaacSrc = {
    mp4: [
      'https://your-mp4-h264-aac-url.mp4'
    ]
  };
  var av1aacSrc = {
    mp4: [
      'https://your-mp4-av1-aac-url.mp4'
    ]
  };
  // Then we can use the canPlayType method from getEnvironment API to determine 
  // if AV1 (Main Profile, level 2.1) and HE-AACv2 support is available
  src = avcaacSrc;
  if (env.canPlayType('native', 'video', 'mp4', 'av01.0.01M.08', 'mp4a.40.29')) {
    src = av1aacSrc;
  }
  // Then we set our player settings using the selected src object
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>
Player code example for DASH/AV1 - see this example here
<script src="https://cdn.radiantmediatechs.com/rmp/6.4.10/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
// First we create our Radiant Media Player instance
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  // We can then gain access to the getEnvironment API method
  var env = rmp.getEnvironment();
  // We define 2 source objects, one with AV1/AAC and the other with H.264/AAC
  var src;
  var dash = 'https://5b44cf20b0388.streamlock.net:8443/vod/smil:bbb.smil/manifest.mpd';
  var av1Dash = 'https://storage.googleapis.com/bitmovin-demos/av1/stream.mpd';
  // Then we can use the canPlayType method from getEnvironment API to determine 
  // if AV1 (Main Profile, level 2.1) and HE-AACv2 support is available
  src = dash;
  // currently only latest Firefox supports DASH/AV1 so we need to
  // confirm that we are on Firefox and with AV1 support
  var FIREFOX_PATTERN = /firefox\/[.0-9]+?/i;
  if (FIREFOX_PATTERN.test(navigator.userAgent) && env.canPlayType('mse', 'video', 'mp4', 'av01.0.01M.08', 'mp4a.40.29')) {
    src = av1Dash;
  }
  // Then we set our player settings using the selected src object
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

AC-3 & EC-3 support

Dolby AC-3 audio codec is a popular codec generally used to convey multi-channels audio content with video content. It is possible to use AC-3 audio with H.264 or H.265 video in Radiant Media Player. In order to support AC-3 audio the targeted device must exhibit support for it either through native HTML5 video or Media Source Extension. As of June 2018, AC-3 audio with H.264 video is supported in:

  • MS Edge Legacy and MS Edge 79+ for Windows 7+
  • macOS Safari 11+
  • iOS 12+ Safari

Where H.264/AC-3 is not supported we must provide an H.264/AAC audio fallback for decent device coverage. AC-3 audio-only streaming to HTML5 audio may work but has not been tested and is thus not currently supported by Radiant Media Player.

A newer version of AC-3, called EC-3, is also available on the market and the player supports it as well but not all devices supporting AC-3 can support EC-3. To detect support for EC-3 use ec-3 MIME type instead of ac-3.

While this documentation focuses on H.264/AC-3 support it may also possible to use H.265/AC-3 where both H.265 and AC-3 are supported. See the H.265 docs for more information.

H.264/AC-3 with HLS or DASH

The best way to deliver H.264/AC-3 content with HLS or DASH is to use a mix of H.264/AC-3 content and H.264/AAC content directly referenced in the master HLS playlist or DASH manifest. The codecs information must be explicitly described in the playlist or manifest. An example of such stream can be found here:

https://www.radiantmediaplayer.com/media/hls/ac3/playlist.m3u8

With the above example, where AC-3 audio is supported the player will pick the H.264/AC-3 rendition and where AC-3 is not supported the player will the H.264/AAC rendition. This example is just a basic example of how to mix H.264/AC-3 and H.264/AAC content in a HLS master playlist, in real-life use-cases each pairs of codecs are likely to have several renditions each to enable ABR streaming and this will work with the player as well.

H.264/AC-3 with MP4 progressive download

Radiant Media Player can also support H.264/AC-3 with MP4 progressive download. As with HLS or DASH you will also need to prepare an H.264/AAC rendition as a fallback where H.264/AC-3 is not supported. To accomplish this will need to use a method from the getEnvironment API method. But let us run through an example to see how it works:

<script src="https://cdn.radiantmediatechs.com/rmp/6.4.10/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
// First we create our Radiant Media Player instance
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  // We can then gain access to the getEnvironment API method
  var env = rmp.getEnvironment();
  // We define 2 source objects, one with H.264/AC-3 and the other with H.264/AAC
  var src;
  var avcaacBitrates = {
    mp4: [
      'https://your-mp4-h264-aac-url.mp4'
    ]
  };
  var avcac3Bitrates = {
    mp4: [
      'https://your-mp4-h264-ac3-url.mp4'
    ]
  };
  // Then we can use the canPlayType method from getEnvironment API to determine if H.264/AC-3 support is available
  // See next section for documentation on canPlayType method
  src = avcaacBitrates;
  if (env.canPlayType('native', 'video', 'mp4', 'avc1.42E01E', 'ac-3')) {
    src = avcac3Bitrates;
  }
  // Then we set our player settings using the selected src object
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

canPlayType method

In the above example we used the canPlayType method from the getEnvironment API.

canPlayType(mode: String, type: String, container: String, videoCodec: String, audioCodec: String, eotf: String)

canPlayType returns a Boolean stating if the targeted device supports or not the combination of provided media data. Input variables are:

  • mode can be 'native' (for native HTML5 video/audio testing) or 'mse' (for Media Source Extensions testing)
  • type can be 'video' (for video + audio content) or 'audio' (for audio-only content)
  • container can be 'mp4', 'webm', 'mp3', 'm4a', 'ogg' or 'oga'
  • videoCodec (optional) can be any valid video codec MIME type string that needs to be tested - see below for a list of common values
  • audioCodec (required) can be any valid audio codec MIME type string that needs to be tested - see below for a list of common values
  • eotf (optional) can be any valid HDR MIME type string that needs to be tested - currently 'smpte2084' value seems to be the most commonly used

Common values for videoCodec:

  • AV1 Main Profile, level 2.1: 'av01.0.01M.08' (see here for more information)
  • H.264 baseline 3.0: 'avc1.42E01E'
  • H.264 main 4.0: 'avc1.4D4028'
  • H.264 high 5.0 (4K video generally): 'avc1.640032'
  • H.264 AVC3 baseline 3.0 (fMP4): 'avc3.42E01E' - avc3 is a container level box to record the H.264 codec extradata - avc3 was introduced for fragmented mp4 support
  • H.265 basic support: 'hev1.1.6.L93.90' or 'hvc1.1.6.L93.90' (we need to test for both to determine HEVC support)
  • H.265 with HDR support: 'hev1.2.4.L153.B0' with eotf 'smpte2084' or 'hvc1.2.4.L153.B0' with eotf 'smpte2084'
  • VP8: 'vp8'
  • VP9: 'vp9'
  • VP9 custom profile: 'vp09.00.10.08'

Common values for audioCodec:

  • AAC-LC: 'mp4a.40.2'
  • HE-AACv1: 'mp4a.40.5'
  • HE-AACv2: 'mp4a.40.29'
  • MP3: 'mp4a.40.34'
  • AC-3: 'ac-3'
  • EC-3: 'ec-3'
  • Vorbis: 'vorbis'
  • Opus: 'opus'
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2021 Radiant Media Player. All rights reserved.