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:
This is best achieved with our player when a HLS/DASH manifest hold HEVC, VP9, AV1 and/or AVC variants. 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.8.0/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 dash: 'https://storage.googleapis.com/shaka-demo-assets/sintel/dash.mpd', // This is for iOS where only HLS is supported hls: 'https://5b44cf20b0388.streamlock.net:8443/vod/sintel-hd.smil/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. The best way to achieve this is for your HLS/DASH manifest to hold both HEVC & AVC variants. When both HEVC & AVC variants are available in a HLS/DASH manifest the player will automatically pick the appropriate codec based on device capabilities.
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 January 2022 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.8.0/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.8.0/js/rmp.min.js"></script> <div id="rmp"></div> <script> // First we create our Radiant Media Player instance const rmp = new RadiantMP('rmp'); // Then we set our player settings const settings = { licenseKey: 'your-license-key', // This DASH stream holds AV1/opus data (latest browsers) combined with AVC/AAC data (legacy browsers) src: { dash: 'https://www.radiantmediaplayer.com/media/dash/4k-av1-avc/manifest.mpd' }, 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.8.0/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-2022 Radiant Media Player. All rights reserved.