Embed guide

1. JavaScript

  • add player source to html page head section,
  • add player container element to html body section,
  • setup player configuration object (For more details about player configuration object see Configuration.),
  • get player container element,
  • initialize player.
<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: {
                    source: [
                        { url: "http://bradmax.com/static/video/tears_of_steel.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>

2. HTML

  • add player container element to html body section,
  • add and setup player source element to html page body section.

bradmax player html script tag attributes:

  • src: URL pointing to player source,
  • data-bs-parent-id: HTML DOM player container id,
  • data-bs-variables: Base64 string of JSON object with player configuration (For more details about player configuration object see Configuration.).
<html>
    <body>

        <!-- 1. add player container element -->
        <div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>

        <!-- 2. setup player script element ** -->
        <script type="text/javascript"
            src="PLAYER_SOURCE.js"
            data-bs-parent-id="PLAYER_DOM_ID"
            data-bs-variables="%7BdataProvider%3A%20%7Bsource%3A%20%5B%7Burl%3A%20%22http%3A%2F%2Fbradmax.com%2Fstatic%2Fvideo%2Ftos%2F440272.mpd%22%7D%5D%7D%7D">
        </script>

    </body>
</html>

3. Mixed

  • add player container element to html body section,
  • build and setup player 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 = {
                dataProvider: {
                    source: [
                        { url: "http://bradmax.com/static/video/tears_of_steel.mp4" }
                    ]
                }
            };

            /** 2.b. create HTML script element  */
            var script = document.createElement("script");

            /** 2.c. setup HTML script element  */
            var playerConfigStr = escape(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>

4. Placing player keeping aspect ratio

Bradmax player use all available area provided by some HTML placeholder. In examples above it was <div style="..." id="PLAYER_DOM_ID"></div>. Player is responsive. This mean in case of changing size of this placeholder player will automatically adjust to this change.

Example below will instruct how setup CSS for player placeholder for frequent case, when it is needed to use full width of some HTML container and adjust player height in such way that some aspect ratio (proportion between height and width) if kept.

<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 SCALLING 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 SCALLING 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="https://bradmax.com/static/sales_v2/js/player/zebra.js"></script>
    <script type="text/javascript">
    var media = {
        dataProvider: { source: [{ url: "https://bradmax.com/static/video/tos/big_buck_bunny.m3u8" }] }
    };
    var element = document.getElementById("PLAYER_DOM_ID");
    var playerInstance = window.bradmax.player.create(element, media);
    </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 SCALLING 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 SCALLING 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.