licenseKey: String
Your Radiant Media Player license key. It is a mandatory requirement for the player to work. For active customers license keys are managed in Radiant Media Player back-end.
delayToFade: Number
Represents the delay in milliseconds before the overlay control
bar fades away when no user interaction is detected.
Default: 3500.
loop: Boolean
Command the player to loop after the video ends. This is only supported for
on-demand video. Default: false.
The loop setting is
not supported with video
advertisement on iOS as it can create content recovery issue. When video
advertisement are set the loop setting is automatically disabled on iOS.
scaleMode: String
This parameter changes the way the video is rendered within the stage.
Possible values are 'letterbox' (a.k.a. fit), 'zoom', 'stretch',
'none'. Default: 'letterbox'. This feature makes use of the object-fit CSS property for HTML5
video.
The scale mode
setting only applies to video
content. Linear video advertisement may not follow the scaleMode setting.
posterScaleMode: String
This parameter changes the way the poster is rendered within the stage
(same as scaleMode but for the poster frame). Possible values are
'letterbox', 'zoom',
'stretch', 'none'. Default:
'letterbox'. This feature makes use of the
object-fit CSS
property
for HTML images.
hideInitialBlackFrameWhenNoPoster: Boolean
When a live or on-demand stream loads into the player it is possible to
display
the first frame of the stream as a poster frame (provided no poster has been
set through the contentMetadata setting). This feature
is not supported in
iOS or macOS Safari. Default: true.
displayRemainingTimeInPlaceOfDuration: Boolean
When set to true, remaining time will be shown in player UI in place of content duration (only for on-demand
content). Default: false.
crossorigin: String
This parameter allows to set the
crossorigin
attribute for Radiant Media Player HTML5 video tag. Default: ''. Other
possible
values are: 'anonymous',
'use-credentials'. For 360° video this setting is
automatically set to 'anonymous' for better cross-device
support (if not set to 'use-credentials').
offsetStartPosition: Number
This setting tells the player to start at a given timestamp.
Must be expressed in millisecond. Default: 0, which
means no offset.
automaticFullscreenOnLandscape: Boolean
On mobile devices, the player can be configured to automatically enter fullscreen as orientation
changes to landscape. When orientation changes to portrait the player will automatically
leaves fullscreen. Currently not available for iOS. Default: true.
automaticLandscapeOnFullScreen: Boolean
On mobile devices, the player can be configured to automatically enter
landscape mode when fullscreen is requested by a viewer. Currently not available for iOS. Default:
true.
bitrateDataDisplayed: Boolean
The quality module can display various information about the HLS or MPEG-DASH
stream currently displayed to the viewer. The player will always
show the height of the currently available rendition - on top of that the player
can also display the bitrate in kbps or Mbps. Default: 'kbps'. Other possible
values
are 'none' or 'Mbps'.
displayCodecData: Boolean
Additionally displays codecs information in quality module for each rendition. Default: false.
doubleClickForFullscreen: Boolean
On device where double clicking is
possible, a double click action will cause player to
enter (or exit) fullscreen. Default: true.
pauseContentWhenViewingAreaIsClicked: Boolean
By default on desktop, when the player viewing area is clicked, content pauses (or resumes). Setting
pauseContentWhenViewingAreaIsClicked to false will prevent this behavior. Default:
true.
disableKeyboardControl: Boolean
In some environments (typically smart TV apps) it may be best to disable keyboard navigation. Set this
setting to true
if you want to disable default keyboard controls for the player. Default:
false.
flipVideo: Object
Flip video content inside the player. Content can be rotated around X, Y or Z axis. Input values must be
numbers expressing a degree of rotation. Default: {x: 0, y: 0, z: 0}. Example:
const flipVideo = {
x: 20,
y: 45,
z: -90
};
longFormContent: Boolean
Enables buffer optimisation for long-form content (e.g. content duration > 10 minutes). Default:
false.
Source streaming data (HLS, MPEG-DASH or progressive download URLs) are passed to the player
through the
src player setting:
src: Object
This setting holds streaming information for the content to be displayed: HLS streaming, MPEG-DASH streaming or/and MP4/WebM progressive download. You must provide at least one streaming URL for the player to display content (exception being for outstream video ads which do not require actual content). For audio-only streaming refer to the audio-only documentation page. When multiple streaming protocols are provided the player will opt for the best suitable candidate based on device capabilities. Example:
const src = {
hls: 'https://your-hls-url.m3u8',
dash: 'https://your-dash-url.mpd',
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'
]
};
We recommend using fully qualified URLs for your streaming data. Relative or absolute path can also be used but beware of pathing issues.
The above example shows all player capabilities. You do not need to provide all streaming
protocols variant to the
player - only use the one that you are able to provide. Expected types for the
src object properties follow:
src.hls: string
src.dash: string
src.mp4: Array.<string>
src.webm: Array.<string>
The player will follow the following order when opting for a streaming protocol: HLS > MPEG-DASH > Progressive download
contentMetadata: Object
contentMetadata: {
title: 'My content title', // Title will show on top left corner of player when available, also used for accessibility, Media Notifications and Google Cast
description: 'My content description', // Used for accessibility and secondary title on top left corner of player
artist: 'My artist', // Used for Media Notifications
album: 'My album', // Used for Media Notifications
id: 'My id', // Used to uniquely identify media
releaseDate: '2016-02-10', // Used for Google Cast (ISO 8601 - example: 2022-07-13T08:16:31Z - date and/or time when the content was released)
googleCastType: 'GENERIC', // Used for Google Cast (Availables values are 'MOVIE', 'TV_SHOW' or 'GENERIC')
artwork: [ // Used for Media Notifications - if none provided the poster attribute will be used
{ src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' },
{ src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
{ src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
{ src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
{ src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
{ src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' }
],
poster: [ // Used for poster frame for the player - player will choose best image based device specificity
'https://dummyposter.com/1xDPR', // Used for device with 1 <= DPR < 2 (DPR = device pixel ratio)
'https://dummyposter.com/2xDPR', // Used for device with 2 <= DPR < 3
'https://dummyposter.com/3xDPR', // Used for device with 3 <= DPR < 4
'https://dummyposter.com/4xDPR' // Used for device with DPR > 4 - the higher DPR will be used for Google Cast poster frame
],
endOfVideoPoster: [ // Used for end of video poster frame - player will choose best image based device specificity
'https://dummyendofvideoposter.com/1xDPR', // Used for device with 1 <= DPR < 2 (DPR = device pixel ratio)
'https://dummyendofvideoposter.com/2xDPR', // Used for device with 2 <= DPR < 3
'https://dummyendofvideoposter.com/3xDPR', // Used for device with 3 <= DPR < 4
'https://dummyendofvideoposter.com/4xDPR' // Used for device with DPR > 4 - the higher DPR will be used for Google Cast poster frame
],
animatedPoster: 'https://uri-to-thumnail', // URI for animated poster
thumbnail: 'https://uri-to-thumnail', // Thumbnail for playlist or related
duration: 'HH:mm:ss' // Duration for related
}
All contentMetadata properties are optional but we recommend at least setting a poster property (even when autoplay is enabled as the poster can be viewed when content has ended - if a specific endOfVideoPoster is not set).
Content metadata can be updated with the
contentMetadataConfiguration getter|setter. This can be useful when using the
setSrc API method to update metadata as player source changes.
You can use HTML markup (example <a> or <em>) in title and description to customize text
We support image-based animated poster in the following formats: WebP (recommended), AVIF, APNG, GIF. This
feature is enabled by setting contentMetadata.animatedPoster as shown above. By default, the
animated poster will be shown when mouse is hovered the player (standard poster will be shown in the
meantime). Animated poster can be set to
autoplay on player load with autoplayAnimatedPoster setting.
This feature can provide greater engagement with the viewer. We recommend the animated poster to be a cut of the 15 first seconds of the video, or a key moment of the video, at a SD resolution (640x360 or 960x540). Using a modern animated image format like WebP, the animated poster should be around 2-4 MB.
autoplayAnimatedPoster: Boolean
When autoplayAnimatedPoster is set to true the animated poster will autoplay on player load
without the need for the viewer to hover the player to activate the animation.
You can create animated images with various online services, but you can also use FFmpeg. Using FFmpeg to create an animated poster for Radiant Media Player is quite straight forward with the following command:
ffmpeg -i input.mp4 -ss 00:00:00.000 -t 00:00:15.000 -c:v libwebp -filter:v fps=15,scale=640:-2 -sws_flags bicubic -lossless 1 -loop 0 -preset default -an output.webp
input.mp4 is our input video file that will be used as basis to create the animated poster (a SD file should be enough). Here we create an animated poster from the first 15 seconds of the video (-ss 00:00:00.000 -t 00:00:15.000) using WebP (-c:v libwebp) at 640 width resolution and 15 frames per second (-filter:v fps=15,scale=640:-2).
We support customized Media notifications on mobile,
desktop, and paired wearable device. Media notifications data are set based on title, artist, album, artwork
properties of contentMetadata setting. For playlist/related those information are automatically
filled by the
player based on playlist/related metadata.
initialVolume: Number
Command the player to start with a specific initial volume. Value must be a
Number between 0 (no volume) and 1 (maximum volume) where
for example
0.5 will set the volume half-way. Default: 1.
When
muted
setting is set to true or on device where only muted autoplay is allowed (and autoplay is
requested) this
setting will have no effect
muted: Boolean
Command the player to be started as muted a.k.a. no audio. Default:
false.
permanentMuted: Boolean
Command the player to be started and to remain muted permanently
(a.k.a. no audio). This differs from the
muted setting in the sense that the viewer will not be able to restore
volume using the player controls, keyboard or
device volume controls. Default:
false.
allowLocalStorage: Boolean
The player does use
localStorage
for the following
purposes: to faster authenticate the player license, when using the
rememberVolume, rememberCurrentTime,
rememberQuality settings. The player does not store
personal data when it uses
localStorage, but only
technical, anonymous variables. If you do not want the player to access the viewer
localStorage set
allowLocalStorage to false. Note that this only applies
to the player core
library, 3rd-party libraries
like the Google IMA SDK will use cookies and may require
specific
consent handling depending
on your targeted audience. Default: true.
rememberVolume: Boolean
When set to true this setting will cause the player to use
localStorage
to save
the current player volume each time it is changed by viewer. On a new page load
if a saved volume value is detected in localStorage this saved volume value will be used
to set
initial player volume. Default: true.
rememberCurrentTime: Boolean
When set to true this setting will cause the player to use
localStorage to save
the current time of content when it changes (only works for on-demand streaming). Note that for this feature
to work for multiple items you need to provide a unique contentMetadata.id for each video. On a
new page load if a saved current time value is detected in localStorage this saved current time value
will be used to start the player at the last known timestamp. Default: false. When used this
setting overrides offsetStartPosition setting.
This setting will only work for a given device and not accross devices. If you want this feature for multiple devices you need to build a server-side logic that saves the current timestamp on the server.
rememberQuality: Boolean
When set to true this setting will cause the player to use
localStorage
to save
the current quality each time it is changed by viewer. On a new page load
if a saved quality value is detected in localStorage this saved quality value will be used
to set
initial quality for the player. Works with HLS, MPEG-DASH and progressive download streaming.
Default: false.
Please review our blog post GDPR compliancy while using Radiant Media Player for additional information.
strictGdprCompliance: Boolean
When set to true, allow the player to use secondary license servers located inside the European Union. Only use if you have a business requirement to do so. Default: false.
You can provide your audience with playback rate change options, thanks to our intuitive playback rate player module. For more advanced use-cases our player API will let you build a custom experience.
speed: Boolean
Activate or not the playback rate module. Default: false.
speedRates: Array
Set the playback rate available values to be used by the playback rate
module. Must be submitted as an array of numbers. Default:
[0.25, 0.5, 1, 1.5, 2, 4].
<script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp.min.js"></script> <div id="rmp"></div> <script> // Streaming source - HLS in this example const src = { hls: 'https://your-hls-url.m3u8' }; const settings = { licenseKey: 'your-license-key', width: 640, height: 360, src, // Playback rate settings speed: true, speedRates: [0.25, 0.5, 1, 1.5, 2, 4], contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); async function initRmpPlayer() { try { await rmp.init(settings); } catch (error) { console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script>
ratechange
Fires when the playing speed of content changes.
playbackRate getter|setter (Number)
const playbackRate = rmp.playbackRate;
rmp.playbackRate = 0.5;
get|set player playback rate. Decent values for playback rate range from 0.25 to 4 and can be increment by 0.1. Values outside this range may cause playback issues in older/low resource devices.
quickRewind: Number
This setting tells the player to display a quick rewind icon within the
control bar. Interacting with this icon will cause the player to quickly rewind its
play-head
according to the quickRewind value. Possible values for
quickRewind setting
are: 5, 10, 30. Those values respectively represent a quick rewind of 5s, 10s or 30s. A
common value in the industry is 10s but you may want to adapt this based on the type of
content being delivered (e.g. short-form vs. long-form content). Default: 0, which means
no quick rewind icon is shown on player. You can use both
quickRewind and quickForward at the same time.
quickForward: Number
This setting tells the player to display a quick forward icon within the
control bar. Interacting with this icon will cause the player to quickly forward its
play-head
according to the quickForward value. Possible values for
quickForward setting
are: 5, 10, 30. Those values respectively represent a quick forward of 5s, 10s or 30s. A
common value in the industry is 10s but you may want to adapt this based on the type of
content being delivered (e.g. short-form vs. long-form content). Default: 0, which means
no quick forward icon is shown on player. You can use both
quickRewind and quickForward at the same time.
For HLS and MPEG-DASH streaming, manifests should hold codecs information so that the player can make an informed decision about which codec to choose based on client-device capabilities and available renditions. If not present in the manifest, codecs information will be determined when reading the first chunk. It is best practice to provide video/audio codecs information in the manifest though.
For progressive download the player assumes the following:
How to tell the player that a different combination of codecs if available in this case? The player also supports the following codecs:
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,
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,
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();
This section highlights best practices for using multiple player instances on the same web page.
Here is a complete example:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>TODO supply a title</title> </head> <body> <!-- Only include Radiant Media Player core JavaScript file once--> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp.min.js"></script> <!-- First player container--> <div id="rmp1"></div> <!-- Second player container--> <div id="rmp2"></div> <script> // Settings for player 1 const src1 = { hls: 'https://your-hls-url-1.m3u8' }; const settings1 = { licenseKey: 'your-license-key', src: src1, width: 640, height: 360, contentMetadata: { poster: [ 'https://your-poster-url-1.jpg' ] } }; // Settings for player 2 const src2 = { hls: 'https://your-hls-url-2.m3u8' }; const settings2 = { licenseKey: 'your-license-key', src: src2, width: 640, height: 360, contentMetadata: { poster: [ 'https://your-poster-url-2.jpg' ] } }; // Elements const element1 = 'rmp1'; const element2 = 'rmp2'; // Create new objects based on RadiantMP constructor const rmp1 = new RadiantMP(element1); const rmp2 = new RadiantMP(element2); // Initiating both players async function initRmpPlayer() { try { await rmp1.init(settings1); await rmp2.init(settings2); } catch(error) { console.error('Error while initiating Radiant Media Player', error); } } initRmpPlayer(); </script> </body> </html>
Each instance of Radiant Media Player can then be manipulated with our JavaScript API.
When multiple players are on the same page only the first one (first init called) gets Google Cast support.
©2015-2025 Radiant Media Player. All Rights Reserved. ✝