Embed guide

JavaScript API

Steps required to embed Bradmax Media Player in an HTML page using JavaScript code:

Add the player source to the header section of the HTML page.
Add a player container element to the HTML content section.
Configure the player configuration object (For more details about player configuration object see Configuration.).
Get the HTML element of the video player container.
Initialize player (For more details about JavaScript player see JavaScript API.).

Example of embedding player using JavaScript:

<html>
    <head>
        <!-- 1. add player source -->
        <script src="PLAYER_SOURCE.js"></script>
    </head>
    <body>
        <!-- 2. add player container element -->
        <div style="width: 890px;height: 500px;background: black;" id="PLAYER_DOM_ID"></div>
        <script type="text/javascript">
            /** 3. setup player configuration object */
            var playerConfig = {
                dataProvider: {
                    skin: { theme: "THEME_NAME" }, // possible value: 'disco', 'gorilla', 'jazz', 'mole', 'snake', 'techno', 'zebra'
                    source: [
                        { url: "https://example.com/video.mp4" }
                    ]
                }
            };
            /** 4. get player container element */
            var element = document.getElementById("PLAYER_DOM_ID");
            /** 5. initialize player */
            var player = window.bradmax.player.create(element, playerConfig);
        </script>
    </body>
</html>

HTML <script>

Steps required to embed Bradmax Media Player in an HTML page:

Add player container element to html body section.
Add and setup player script element to html page body section.

HTML DOM script element attributes

attribute	type	description
`src`	string	The URL pointing to the source of the player.
`data-bs-parent-id`	string	The ID of the HTML DOM element to which the player can be attached.
`data-bs-variables` or `<script>...</script>`	string or object	If the player configuration is set via `data-bs-variables`, the value must be in Base64 format or encoded as the URI component string of a valid JSON object. If the player configuration is set inside <script> HTML tag (innerText), then it must be a valid JSON object. For more details about player configuration object please see Configuration.

Examples of embedding player using HTML <script> DOM element with:

Embed using <script> attribute `data-bs-variables` with Base64 encoded string of valid player configuration JSON object:

preparing string with player configuration:

var base64Config = window.btoa(
    JSON.stringify({
        skin: { theme: "THEME_NAME" }, // possible value: 'disco', 'gorilla', 'jazz', 'mole', 'snake', 'techno', 'zebra'
        dataProvider: {
            source: [{ url: "https://example.com/video.mp4" }]
        }
    })
);
console.log(base64Config);

embedding player on HTML page:

<html>
    <body>
        <!-- add player container element -->
        <div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
        <!-- setup player script element with config as base64 string -->
        <script type="text/javascript"
            src="PLAYER_SOURCE.js"
            data-bs-parent-id="PLAYER_DOM_ID"
            data-bs-variables="eyJza2luIjp7InRoZW1lIjoidGVjaG5vIn0sImRhdGFQcm92aWRlciI6eyJzb3VyY2UiOlt7InVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS92aWRlby5tcDQifV19fQ==">
        </script>
    </body>
</html>

Embed using <script> attribute `data-bs-variables` with encoded URI component string of valid player configuration JSON object:

preparing string with player configuration:

var uriEncodedConfig = window.encodeURIComponent(
    JSON.stringify({
        skin: { theme: "THEME_NAME" }, // possible value: 'disco', 'gorilla', 'jazz', 'mole', 'snake', 'techno', 'zebra'
        dataProvider: {
            source: [{ url: "https://example.com/video.mp4" }]
        }
    })
);
console.log(uriEncodedConfig);

embedding player on HTML page:

    <html>
        <body>
            <!-- add player container element -->
            <div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
            <!-- setup player script element with config encoded as URI component string -->
            <script type="text/javascript"
                src="PLAYER_SOURCE.js"
                data-bs-parent-id="PLAYER_DOM_ID"
                data-bs-variables="%7B%22skin%22%3A%7B%22theme%22%3A%22THEME_NAME%22%7D%2C%22dataProvider%22%3A%7B%22source%22%3A%5B%7B%22url%22%3A%22http%3A%2F%2Fexample.com%2Fvideo.mp4%22%7D%5D%7D%7D">
            </script>
        </body>
    </html>

Embed using content of <script> element as valid JSON object with player configuration:

<html>
    <body>
        <!-- add player container element -->
        <div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
        <!-- setup player script element with config as valid JSON inside <script tag> -->
        <script type="text/javascript"
            src="PLAYER_SOURCE.js"
            data-bs-parent-id="PLAYER_DOM_ID">{
                "skin": { "theme": "THEME_NAME"}, // possible value: 'disco', 'gorilla', 'jazz', 'mole', 'snake', 'techno', 'zebra'
                "dataProvider": {
                    "source": [{ "url": "https://example.com/video.mp4" }]
                }
        }</script>
    </body>
</html>

HTML <iframe>

Bradmax player gives possibility for integration with iframe element. In that case player is hosted by Bradmax. Developer has to put only short HTML code on an own page with some parameters.

Such integration is easier, also after player configuration update (colors / skins ) such change is instantly visible on user page (only page reload / reopen) is needed. Main disadvantage of this solution are limited features and less possibilities of deeper integration with the player.

<iframe> src query params

Iframe HTML code has general structure

        <iframe src="<YOUR_GENERATED_IFRAME_FILE_URL>?mediaUrl=<MEDIA_URL>&<OTHER_PARAMS>"
            width="600" height="400" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Where YOUR_GENERATED_IFRAME_FILE_URL is the unique player URL that can be obtained after building the Bradmax Media Player via the Bradmax client panel. For more information, see the quick start guide.

Only required parameter is mediaUrl - URL to some video file or stream. Other parameters are optional like image, title, duration, etc.

All query parameters should be “url encoded” (https://en.wikipedia.org/wiki/Percent-encoding).

Javascript see: escape() , encodeURIComponent()
PHP see: urlencode() , http_build_query()
Python see: urllib.parse.urlencode

Field	Description
mediaUrl	URL to media file or video stream.
mediaUrl2	Fallback URL for media. If first is not supported by user device, this will be checked.
mediaUrl3	Another fallback URL for media. If first and second are not supported by user device, this will be checked.
id	Media asset id - for statistics video identification.
title	Media asset title. Will be presented on player.
duration	Media duration in seconds.
splashImgUrl	URL to image presented on player before starting video playback.
a.vmap	(Ads support required) URL to VMAP file defining, what ads should be presented by player.
live	Values ("1", “0”). If "1", then player will threat video as live stream transmission without duration defined.
liveEndDate	Date time as ISO 8601 string (https://en.wikipedia.org/wiki/ISO_8601). Examples: “2020-06-10T20:00:00Z” (2020-06-10 20:00:00 UTC time zone), “2020-06-12T18:00:00+08:00” (2020-06-12 18:00:00 GMT+8 time zone). If defined, then player is able to detect end of live stream transmission. Without it player will be assume end of transmission and end splash screen will be presented.
liveThankYouImageUrl	Link to custom end splash image, which should be shown after end of live stream transmission. If not defined then default start splash will be shown after end of transmission.
liveWaitingForTransmissionImageUrl	Link to custom waiting for transmission image, which should be shown when player is waiting for live stream transmission start.
liveLowLatencyMode	Indicates if lowLatencyMode should be enabled. By default it is disabled. When lowLatencyMode:true then latency optimization is used at the expense of quality (stream is in lower quality and can buffer more frequently, but with much lower latency). This mode is working only for HLS and MPEG-DASH streams.
iosInline	Values ("1", “0”). If "1", then it indicates that video should be inlined for iPhone devices.
t	Video start playback position. Value in seconds. Default value is “0.0” - beginning of video.
autoplay	Values ("1", “0”). If "1", then player will try to autoplay video. Video playback can be blocked by user device - waiting for user action / click.
mute	Values ("1", “0”). If "1", then video will be by default muted. Commonly used with autoplay=1.

Iframe examples:

Basic Iframe example:

query params:

mediaUrl: https://example.com/video.mp4 (URL encoded: https%3A%2F%2Fexample.com%2Fvideo.mp4)
title: Basic Iframe example (URL encoded: Basic%20Iframe%20example)
duration: 734.09 sec (URL encoded: 734.09)
splashImageUrl: https://example.com/startsplash.jpg (URL encoded: https%3A%2F%2Fexample.com%2Fstartsplash.jpg)

<html>
    <body>
        <iframe src="<YOUR_GENERATED_IFRAME_FILE_URL>?mediaUrl=https%3A%2F%2Fexample.com%2Fvideo.mp4&title=Basic%20Iframe%20example&duration=734.09&splashImgUrl=https%3A%2F%2Fexample.com%2Fstartsplash.jpg"
            width="600" height="400" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </body>
</html>

Iframe autoplay and mute example

query params:

mediaUrl: https://example.com/video.mp4 (URL encoded: https%3A%2F%2Fexample.com%2Fvideo.mp4)
autoplay: 1 (URL encoded: 1)
mute: 1 (URL encoded: 1)

<html>
    <body>
        <iframe src="<YOUR_GENERATED_IFRAME_FILE_URL>?mediaUrl=https%3A%2F%2Fexample.com%2Fvideo.mp4&autoplay=1&mute=1"
            width="600" height="400" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </body>
</html>

Iframe live stream example

query params:

mediaUrl: https://example.com/live_stream.m3u8 (URL encoded: https%3A%2F%2Fexample.com%2Flive_stream.m3u8)
live: 1 (URL encoded: 1)
liveEndDate: 2020-06-10T20:00:00Z (URL encoded: 2020-06-10T20%3A00%3A00Z)
liveThankYouImageUrl: https://example.com/thankyou_endsplash.jpg (URL encoded: https%3A%2F%2Fexample.com%2Fthankyou_endsplash.jpg)
liveWaitingForTransmissionImageUrl: https://example.com/waiting_for_transmission.jpg (URL encoded: https%3A%2F%2Fexample.com%2Fwaiting_for_transmission.jpg)

<html>
    <body>
        <iframe src="<YOUR_GENERATED_IFRAME_FILE_URL>?mediaUrl=https%3A%2F%2Fexample.com%2Flive_stream.m3u8&live=1&liveEndDate=2020-06-10T20%3A00%3A00Z&liveThankYouImageUrl=https%3A%2F%2Fexample.com%2Fthankyou_endsplash.jpg&liveWaitingForTransmissionImageUrl=https%3A%2F%2Fexample.com%2Fwaiting_for_transmission.jpg"
            width="600" height="400" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </body>
</html>

Mixed

Steps required to embed Bradmax Media Player in an HTML page using <script> element and JavaScript code:

Add player container element to html body section.
Build and setup player element.
- a. setup player configuration.
- b. create HTML script element.
- c. setup HTML script element.
- d. append HTML script element to page DOM tree.

Example of embedding player using JavaScript and <script> element:

<html>
    <body>
        <!-- 1. add player container element -->
        <div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
        <!-- 2. build player -->
        <script type="text/javascript">
            /** 2.a. setup player configuration */
            var playerConfig = {
                skin: { theme: "THEME_NAME" }, // possible value: 'disco', 'gorilla', 'jazz', 'mole', 'snake', 'techno', 'zebra'
                dataProvider: {
                    source: [{ url: "https://example.com/video.mp4" }]
                }
            };
            /** 2.b. create HTML script element  */
            var script = document.createElement("script");
            /** 2.c. setup HTML script element  */
            var playerConfigStr = window.encodeURIComponent(JSON.stringify(playerConfig));
            script.setAttribute("data-bs-variables", playerConfigStr);
            script.setAttribute("data-bs-parent-id", "PLAYER_DOM_ID");
            script.setAttribute("src", "PLAYER_SOURCE.js");
            script.setAttribute("async", "true");
            script.setAttribute("type", "text/javascript");
            /** 2.d. append HTML script element to page DOM tree */
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(script);
        </script>
    </body>
</html>

Keeping aspect ratio.

The Bradmax player uses all available space provided by the HTML container. In the above examples it was <div style="..." id="PLAYER_DOM_ID"></div>. Bradmax media player is responsive. This means that if you change the size of the container, it will automatically adjust to this Change.

The following examples will show how to configure CSS for the player container in common cases where full width of HTML container in which Bradmax Media Player was embedded needs to be used and forcing the height to maintain the assumed video proportions (proportion of height and width).

CSS ‘aspect-ratio’ feature in majority of modern browsers.

In most modern browsers it is possible to use the aspect-ratio CSS feature to maintain the aspect ratio of the video container.

Before using this method please check aspect-ratio CSS feature browser support.

Examples below will instruct how setup CSS for player keeping 16 by 9 aspect ratio in majority of modern browsers:

<html>
    <body>
        <!-- PLAYER CONTAINER KEEPING ASPECT RATIO -->
        <div style="aspect-ratio: 16/9;" id="PLAYER_DOM_ID"></div>
        <!-- GENERAL PLAYER CONFIGURATION -->
        <script src="PLAYER_SOURCE.js"></script>
        <script type="text/javascript">
            var playerConfig = {
                skin: { theme: "THEME_NAME" }, // possible value: 'disco', 'gorilla', 'jazz', 'mole', 'snake', 'techno', 'zebra'
                dataProvider: {
                    source: [{ url: "https://example.com/video.mp4" }]
                }
            };
            var element = document.getElementById("PLAYER_DOM_ID");
            var playerInstance = window.bradmax.player.create(element, playerConfig);
        </script>
    </body>
</html>

Cross browser method.

<html>
<head>
    <meta charset="UTF-8">
    <title>Bradmax player - example of aspect ratio</title>
    <style>
        .container-with-width h4, .container-with-width h5 { font-family: sans-serif; color: #ddd; font-weight: bold; font-style: italic; }
        .container-with-width h6 { color: #ddd; }
        html, body { height: 100%; margin: 0; }
        .container-with-width { width: 80%; max-width: 900px; margin-left: auto; margin-right: auto; }

        /*  --------- CSS STYLES FOR AUTO SCALING BOX ON PAGE WITH KEEPING ASPECT RATIO ------------ */
        /* This elements is adjusting height with fixed aspect ratio for changing width */
        .player-wrapper-with-aspect-ratio {
          width: 100%;
          border: solid 1px #AAA;
          padding-top: 56.25%; /* Change aspect ratio with padding */
          /*
            100%   - aspect ratio 1:1
            75%    - aspect ration 4:3
            56.25% - aspect ratio 16:9
          */
          position: relative;
        }

        /* This is main element, which use 100% of parent element area for display video */
        .player-element {
          position:absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        /*  --------- /CSS STYLES FOR AUTO SCALING BOX ON PAGE WITH KEEPING ASPECT RATIO ------------ */
    </style>

</head>
<body style="background-color: #2F3442;">

<div class="container-with-width">
    <h4 style="margin-top: 40px; text-align: center;">Bradmax player - CSS example of aspect ratio</h4>

    <!-- PLAYER CONTAINER KEEPING ASPECT RATIO -->
    <div class="player-wrapper-with-aspect-ratio">
        <div class="player-element" id="PLAYER_DOM_ID"></div>
    </div>
    <!-- END OF PLAYER CONTAINER KEEPING ASPECT RATIO -->

    <div style="padding:20px; color:#fff;font-family: sans-serif; text-align: center;">Resize browser window for seeing player width change with keeping aspect ratio.</div>

    <!-- GENERAL PLAYER CONFIGURATION -->
    <script src="PLAYER_SOURCE.js"></script>
    <script type="text/javascript">
      var playerConfig = {
        skin: { theme: "THEME_NAME" }, // possible value: 'disco', 'gorilla', 'jazz', 'mole', 'snake', 'techno', 'zebra'
        dataProvider: {
          source: [{ url: "https://example.com/video.mp4" }]
        }
      };
      var element = document.getElementById("PLAYER_DOM_ID");
      var playerInstance = window.bradmax.player.create(element, playerConfig);
    </script>
</div>

</body>
</html>

Most important parts are:

CSS defining styles for player-wrapper-with-aspect-ratio and player-element

    <style>
        /*  --------- CSS STYLES FOR AUTO SCALING BOX ON PAGE WITH KEEPING ASPECT RATIO ------------ */
        /* This elements is adjusting height with fixed aspect ratio for changing width */
        .player-wrapper-with-aspect-ratio {
          width: 100%;
          border: solid 1px #AAA;
          padding-top: 56.25%; /* Change aspect ratio with padding */
          /*
            100%   - aspect ratio 1:1
            75%    - aspect ration 4:3
            56.25% - aspect ratio 16:9
          */
          position: relative;
        }

        /* This is main element, which use 100% of parent element area for display video */
        .player-element {
          position:absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        /*  --------- /CSS STYLES FOR AUTO SCALING BOX ON PAGE WITH KEEPING ASPECT RATIO ------------ */
    </style>

HTML used for player placeholder (now it is two DIV elements).

    <!-- PLAYER CONTAINER KEEPING ASPECT RATIO -->
    <div class="player-wrapper-with-aspect-ratio">
        <div class="player-element" id="PLAYER_DOM_ID"></div>
    </div>
    <!-- END OF PLAYER CONTAINER KEEPING ASPECT RATIO -->

Use these HTML and CSS styles for placing player in some HTML column - for example on Wordpress page with text column.

Introduction

Embed Guide

JavaScript API

Configuration

Skin Themes

Data Provider

Advertisements

Analytics

DRM

Frequent problems with HTML5 video playback

Embed guide

JavaScript API

Steps required to embed Bradmax Media Player in an HTML page using JavaScript code:

Example of embedding player using JavaScript:

HTML <script>

HTML DOM script element attributes

Examples of embedding player using HTML <script> DOM element with:

Embed using <script> attribute `data-bs-variables` with Base64 encoded string of valid player configuration JSON object:

Embed using <script> attribute `data-bs-variables` with encoded URI component string of valid player configuration JSON object:

Embed using content of <script> element as valid JSON object with player configuration:

HTML <iframe>

<iframe> src query params

Iframe examples:

Basic Iframe example:

Iframe autoplay and mute example

Iframe live stream example

Mixed

Steps required to embed Bradmax Media Player in an HTML page using <script> element and JavaScript code:

Example of embedding player using JavaScript and <script> element:

Keeping aspect ratio.

CSS ‘aspect-ratio’ feature in majority of modern browsers.

Examples below will instruct how setup CSS for player keeping 16 by 9 aspect ratio in majority of modern browsers:

Cross browser method.

Most important parts are:

Jump to

Embed guide

JavaScript API

Steps required to embed Bradmax Media Player in an HTML page using JavaScript code:

Example of embedding player using JavaScript:

HTML <script>

HTML DOM script element attributes

Examples of embedding player using HTML <script> DOM element with:

Embed using <script> attribute data-bs-variables with Base64 encoded string of valid player configuration JSON object:

Embed using <script> attribute data-bs-variables with encoded URI component string of valid player configuration JSON object:

Embed using content of <script> element as valid JSON object with player configuration:

HTML <iframe>

<iframe> src query params

Iframe examples:

Basic Iframe example:

Iframe autoplay and mute example

Iframe live stream example

Mixed

Steps required to embed Bradmax Media Player in an HTML page using <script> element and JavaScript code:

Example of embedding player using JavaScript and <script> element:

Keeping aspect ratio.

CSS ‘aspect-ratio’ feature in majority of modern browsers.

Examples below will instruct how setup CSS for player keeping 16 by 9 aspect ratio in majority of modern browsers:

Cross browser method.

Most important parts are:

Jump to

Embed using <script> attribute `data-bs-variables` with Base64 encoded string of valid player configuration JSON object:

Embed using <script> attribute `data-bs-variables` with encoded URI component string of valid player configuration JSON object: