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:
Two options are available to mix those codecs:
src settingIn both cases, the player will automatically pick the right video codec based on device capabilities.
4K content decoding requirements:
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/7.0.3/js/rmp.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <script> const src = { // This DASH stream holds UHD content in both VP9 and H.264 video - this is optional you can use HLS-only 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' }; const settings = { licenseKey: 'your-license-key', src: src, width: 948, height: 404, dashFirst: true, skin: 's3', contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script>
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:
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.
Example of src object for HLS with option
2:
const src = {
hlsHevc: 'https://your-hls-hevc-url.m3u8',
hls: 'https://your-hls-avc-url.m3u8'
};
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:
This table can give more complete information.
A guide for encoding video with AV1 codec and FFmpeg can be found here.
<script src="https://cdn.radiantmediatechs.com/rmp/7.0.3/js/rmp.min.js"></script> <div id="rmp"></div> <script> // First we create our Radiant Media Player instance const rmp = new RadiantMP('rmp'); // We define 2 source objects, one with AV1/AAC and the other with H.264/AAC let src; const avcaacSrc = { mp4: [ 'https://your-mp4-h264-aac-url.mp4' ] }; const av1aacSrc = { mp4: [ 'https://your-mp4-av1-aac-url.mp4' ] }; // we create a test video tag to detect AV1 support before calling init on player // in this case AV1 (Main Profile, level 2.1) and HE-AACv2 support in a MP4 conatiner const testVideoTag = document.createElement('video'); src = avcaacSrc; if (testVideoTag.canPlayType('video/mp4; codecs="av01.0.01M.08, mp4a.40.29"')) { src = av1aacSrc; } // Then we set our player settings using the selected src object const settings = { licenseKey: 'your-license-key', src: src, width: 640, height: 360, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; rmp.init(settings); </script>
<script src="https://cdn.radiantmediatechs.com/rmp/7.0.3/js/rmp.min.js"></script> <div id="rmp"></div> <script> // First we create our Radiant Media Player instance const rmp = new RadiantMP('rmp'); // We define 2 source objects, one with AV1/AAC and the other with H.264/AAC let src; const dash = 'https://5b44cf20b0388.streamlock.net:8443/vod/smil:bbb.smil/manifest.mpd'; const av1Dash = 'https://storage.googleapis.com/bitmovin-demos/av1/stream.mpd'; // We create a test video tag to detect AV1 support before calling init on player // in this case AV1 (Main Profile, level 2.1) and HE-AACv2 support in a MP4 conatiner const testVideoTag = document.createElement('video'); src = dash; // currently only latest Firefox supports DASH/AV1 so we need to // confirm that we are on Firefox and with AV1 support const FIREFOX_PATTERN = /firefox\/[.0-9]+?/i; if (FIREFOX_PATTERN.test(navigator.userAgent) && testVideoTag.canPlayType('video/mp4; codecs="av01.0.01M.08, mp4a.40.29"')) { src = av1Dash; } // Then we set our player settings using the selected src object const settings = { licenseKey: 'your-license-key', src: src, width: 640, height: 360, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; rmp.init(settings); </script>
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:
Where H.264/AC-3 is not supported we must provide an H.264/AAC audio fallback for decent device coverage.
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.
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.
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. Example:
<script src="https://cdn.radiantmediatechs.com/rmp/7.0.3/js/rmp.min.js"></script> <div id="rmp"></div> <script> // First we create our Radiant Media Player instance const rmp = new RadiantMP('rmp'); // We define 2 source objects, one with H.264/AC-3 and the other with H.264/AAC let src; const avcaacBitrates = { mp4: [ 'https://your-mp4-h264-aac-url.mp4' ] }; const avcac3Bitrates = { mp4: [ 'https://your-mp4-h264-ac3-url.mp4' ] }; // We create a test video tag to detect H.264/AC-3 support before calling init on player const testVideoTag = document.createElement('video'); src = avcaacBitrates; if (testVideoTag.canPlayType('video/mp4; codecs="avc1.42E01E, ac-3"')) { src = avcac3Bitrates; } // Then we set our player settings using the selected src object const settings = { licenseKey: 'your-license-key', src: src, width: 640, height: 360, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; rmp.init(settings); </script>
©2015-2021 Radiant Media Player. All rights reserved.