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. 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:
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/5.12.5/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>
Radiant Media Player relies on the device it runs on to provide HEVC decoding support to render HEVC encoded 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:
For HEVC support in MS Edge Legacy for Windows 10 a compatible graphic card with HEVC decoding support is also required. Note that HEVC support in Chromium-based MS Edge is not available.
Because HEVC is still not widely available it is likely you will need to use a combination of HEVC & AVC encoded content to reach a large range of devices. We 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:
var 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 February 2019, AV1 video support is available in latest Desktop Chrome, Edge, Firefox and Opera. This table can give more complete and up to date information.
AV1 video support in Radiant Media Player is currently available in progressive download mode in MP4 container in Desktop Chrome, Edge, Firefox and Opera and DASH CMAF with latest Desktop Firefox.
A guide for encoding video with AV1 codec and FFmpeg can be found 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/5.12.5/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>
<script src="https://cdn.radiantmediatechs.com/rmp/5.12.5/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>
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. 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.
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. 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/5.12.5/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>
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 valuesaudioCodec (required) can be any valid audio codec MIME type string that needs to be tested - see below for a list of common valueseotf (optional) can be any valid HDR MIME type string that needs to be tested - currently 'smpte2084' value seems to be the most commonly usedCommon values for videoCodec:
Common values for audioCodec:
©2015-2021 Radiant Media Player. All rights reserved.