Bradmax
QUANTEEC is integrated natively into the Bradmax player: there is no additional library to import. When the Quanteec feature is enabled in the Bradmax admin panel, the generated Bradmax player package already embeds the QUANTEEC P2P plugin, and QUANTEEC is configured directly through the quanteecConfig option of the player.
The complete list of supported options, as well as the player embedding, is documented by Bradmax: see the Bradmax QUANTEEC documentation.
Enable QUANTEEC for Bradmax player
3 steps:
1- Enable the Quanteec feature (and the StreamBoost feature if needed) on your player in the Bradmax admin panel. The generated player package then includes the QUANTEEC P2P plugin.
A QUANTEEC key is required. To create a QUANTEEC configuration and retrieve your default QUANTEEC key, you must first go to the Config page of your panel.
Enabling the feature only adds the plugin to the player package: the embed code generated by Bradmax does not contain any QUANTEEC configuration. The quanteecConfig object, with at least your quanteecKey, must be added to the player configuration of each embed (steps 2 and 3).
2- Write the quanteecConfig object, with your quanteecKey and specific options:
{
quanteecConfig: {
quanteecKey: "<your-quanteec-key>",
videoID: "<enter-your-custom-videoID>" // [Optional but recommended] String --> specific name to identify a video. Useful if the videosource url contains a token which is different for every user. By default: the media id or media source url is used.
}
}
The supported options mirror the QUANTEEC web SDK configuration.
For a single video, videoID is set directly in quanteecConfig. For playlists or pages with several videos, set it per video in quanteecConfig.media, keyed by the media id (dataProvider.id):
{
quanteecConfig: {
quanteecKey: "<your-quanteec-key>",
media: {
"<media.id>": {
analyticsVideoID: "<your-analytics-videoID>", // [Optional]
collection: "<your-collection>", // [Optional]
videoID: "<enter-your-custom-videoID>" // [Optional] If not present, the media id will be used.
}
}
}
}
In your QUANTEEC configuration, remember to set a different videoID if you have different formats of the same stream (e.g., one DASH stream and one HLS stream) or two variants of the same stream (one stream with English audio and one stream with another language).
3- Add quanteecConfig at the root of the player configuration of your embed. We recommend the script embed method (chosen in the embed code page of your player in the Bradmax admin panel) rather than the iframe one: the player configuration is then part of your page and supports every QUANTEEC and StreamBoost option.
Script embed
By default, the generated embed code carries the player configuration base64-encoded in the data-bs-variables attribute:
<div id="player" style="width: 600px;height: 400px;"></div><script src="https://bradm.ax/build/<your-player-build>/player.js" type="text/javascript" data-bs-parent-id="player" data-bs-variables="eyJkYXRhUHJvdmlkZXIiOnsic291cmNlIjpbeyJ1cmwiOiJodHRwczovL2JyYWRtYXguY29tL3N0YXRpYy92aWRlby90ZWFyc19vZl9zdGVlbC5tcDQifV0sInRpdGxlIjoiVGVhcnMgb2Ygc3RlZWwiLCJkdXJhdGlvbiI6NzM0LjA5NzQxNSwic3BsYXNoSW1hZ2VzIjpbeyJ1cmwiOiJodHRwczovL2JyYWRtYXguY29tL3N0YXRpYy9pbWFnZXMvc3RhcnRzcGxhc2guanBnIn1dfX0="></script>
To customize it, first decode the data-bs-variables value with any base64 decoder (for example base64 -d in a terminal). It contains the player configuration as JSON:
{
"dataProvider": {
"source": [{ "url": "https://bradmax.com/static/video/tears_of_steel.mp4" }],
"title": "Tears of steel",
"duration": 734.097415,
"splashImages": [{ "url": "https://bradmax.com/static/images/startsplash.jpg" }]
}
}
Add the quanteecConfig object at the root of this JSON, then encode the edited JSON back to base64 (UTF-8) in data-bs-variables.
JavaScript API
When the configuration is built in the page (for example the StreamBoost userId of each viewer), load player.js and create the player with the Bradmax JavaScript API instead: the configuration is passed as a JavaScript object, without any encoding.
<script src="https://bradm.ax/build/<your-player-build>/player.js" type="text/javascript"></script>
<div id="player" style="width: 600px;height: 400px;"></div>
<script>
window.bradmax.player.create(document.getElementById("player"), {
dataProvider: {
source: [{ url: "https://example.com/video.m3u8" }]
},
quanteecConfig: {
quanteecKey: "<your-quanteec-key>",
videoID: "<enter-your-custom-videoID>"
}
});
</script>
Iframe embed
The iframe embed only takes the QUANTEEC key, through the qntcKey parameter of the iframe URL. Add it to the generated URL, with the id parameter (the media id, used as videoID). Values must be URL-encoded:
<iframe src="https://bradm.ax/build/<your-player-build>/index.html?mediaUrl=https%3A%2F%2Fexample.com%2Fvideo.m3u8&title=My%20video&id=<enter-your-custom-videoID>&qntcKey=<your-quanteec-key>" width="600px" height="400px" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Other QUANTEEC options and StreamBoost cannot be set in the URL. To use them in an iframe, replace the URL parameters with postMessage=1 and send the whole player configuration to the iframe once it is loaded:
<iframe id="player" src="https://bradm.ax/build/<your-player-build>/index.html?postMessage=1" width="600px" height="400px" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script>
document.getElementById("player").addEventListener("load", (event) => {
event.target.contentWindow.postMessage({
dataProvider: {
source: [{ url: "https://example.com/video.m3u8" }]
},
quanteecConfig: {
quanteecKey: "<your-quanteec-key>",
videoID: "<enter-your-custom-videoID>"
}
}, "https://bradm.ax");
});
</script>
StreamBoost
StreamBoost is also supported natively by the Bradmax player: configure it through the quanteecConfig.streamboost option. StreamBoost is only displayed when streamboost.userId is set; enabling the StreamBoost feature in the Bradmax admin panel is not enough. The player then displays the StreamBoost button in its UI; set hideInUi: true in the quanteecConfig to hide it.
{
quanteecConfig: {
quanteecKey: "<your-quanteec-key>",
streamboost: {
userId: "<user-id>",
sponsorId: "<my-sponsor>", // [Optional]
sponsorImage: "https://my-sponsor.com/ad-banner.png", // [Optional]
sponsorUrl: "https://my-sponsor.com" // [Optional]
}
}
}
See the Bradmax StreamBoost documentation for the supported options.
userId identifies the viewer: it must be unique per viewer and stay the same across sessions, so that the viewer keeps their Quoins (see Viewer id). Use your platform user id for logged-in viewers; for anonymous viewers, generate a UUID once and keep it in localStorage. As it is computed in the page, it cannot be written in a static data-bs-variables value or iframe URL: create the player with the JavaScript API, or send the configuration to the iframe with postMessage.
<script src="https://bradm.ax/build/<your-player-build>/player.js" type="text/javascript"></script>
<div id="player" style="width: 600px;height: 400px;"></div>
<script>
let userId = localStorage.getItem("quanteecUserId"); // or your platform user id for logged-in viewers
if (!userId) {
userId = crypto.randomUUID();
localStorage.setItem("quanteecUserId", userId);
}
window.bradmax.player.create(document.getElementById("player"), {
dataProvider: {
source: [{ url: "https://example.com/video.m3u8" }]
},
quanteecConfig: {
quanteecKey: "<your-quanteec-key>",
videoID: "<enter-your-custom-videoID>",
streamboost: {
userId: userId
}
}
});
</script>