Here we present general player settings. Specific player settings are available in each documentation page for the related feature.
licenseKey: String
The license key ties your player with an Internet domain. It is a mandatory requirement for the player to work. For active customers license keys and Internet domains 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 ads on iOS as it can create content recovery issue. When video ads are set the loop setting is automatically set to false on iOS.
Do not use the loop setting with post-roll video ads. This use case it not supported.
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 ads 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.
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. On Android when fullscreen button is touch
the player will force to landscape mode as well. Note that automaticFullscreenOnLandscape only applies to mobile devices that are phones not tablet. Default: true.
bitrateDataDisplayed: Boolean
The quality module can display various information about the HLS or 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'.
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 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, 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, 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
src.webm: Array
The player will follow the following order when opting for a streaming protocol:
Depending on your use-case you could want to use:
dashFirst to true for the player to prioritise DASH over HLS.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 our player API through the
getContentMetadata /
setContentMetadata APi methods. 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
With Radiant Media Player 9.13.0 we support image-based animated poster. We support 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, see below.
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
forceInitialVolume: Boolean
When both initialVolume and rememberVolume are enabled, rememberVolume will take precedence over initialVolume on page loads (assuming
rememberVolume can be read from localStorage). Setting forceInitialVolume to true will allow
initialVolume to take precedence over
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 setting. 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. Also note 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 saved 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, 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.
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 submitted 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. The quick rewind icon is not available with the following options: related content or live content. 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 submitted 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. The quick forward icon is not available with the following options: related content or live content. You can use both
quickRewind and quickForward at the same time.
For HLS and 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: src,
width: 640,
height: 360,
pdCheckCodecsDone: true // Here we tell the player to ignore internal codecs check
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
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: src,
width: 640,
height: 360,
pdCheckCodecsDone: true // Here we tell the player to ignore internal codecs check
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
Radiant Media Player can be loaded and run asynchronously. This might be required with certain types of JavaScript frameworks or CMS. You can also use this method to dynamically append the player to the DOM. Example:
const head = document.head || document.getElementsByTagName("head")[0];
const body = document.body || document.getElementsByTagName("body")[0];
let rmpContainer, rmpScript, rmp;
// When Radiant Media Player JavaScript file is asynchronously loaded we append the player to the DOM
const _onLoadAppendPlayer = function () {
// First we create our player container and append it to DOM - in this case the body of our page but it can be anything
rmpContainer = document.createElement('div');
const elementID = 'rmp';
rmpContainer.id = elementID;
body.appendChild(rmpContainer);
// Then we define our player settings as usual
const src = {
hls: 'https://your-hls-url.m3u8'
};
const settings = {
licenseKey: 'your-license-key',
src: src,
width: 640,
height: 360,
contentMetadata: {
poster: [
'https://your-poster-url.jpg'
]
}
};
rmp = new RadiantMP(elementID);
rmp.init(settings);
};
// Log an error if we are unable to retrieve Radiant Media Player JavaScript file
const _onErrorLog = function () {
console.log('could not load Radiant Media Player JavaScript file');
};
// We create our script tag with async set to true and append it to our head
// When it loads we create our player instance
rmpScript = document.createElement('script');
rmpScript.src = 'https://cdn.radiantmediatechs.com/rmp/9.15.3/js/rmp.min.js';
rmpScript.async = true;
rmpScript.addEventListener('load', _onLoadAppendPlayer);
rmpScript.addEventListener('error', _onErrorLog);
head.appendChild(rmpScript);
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"> <!-- Here we preload our CSS; note the required id rmp-dress-code on the link tag --> <!-- You can change skin by replacing rmp-s1.min.css with rmp-s*.min.css (where * is 1 or 2) --> <link type="text/css" rel="stylesheet" id="rmp-dress-code" href="https://cdn.radiantmediatechs.com/rmp/9.15.3/css/rmp-s1.min.css"> <title>TODO supply a title</title> </head> <body> <!-- Only include Radiant Media Player core JavaScript file once--> <script src="https://cdn.radiantmediatechs.com/rmp/9.15.3/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 rmp1.init(settings1); rmp2.init(settings2); </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-2024 Radiant Media Player. All Rights Reserved.