<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>
<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>
<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>
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:
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>
<!-- 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.