Skip to content

Instantly share code, notes, and snippets.

@ptvandi

ptvandi/sportradar-demo.html

Last active March 7, 2019 19:29
Show Gist options
  • Save ptvandi/5f817225792ae16ba42660721fe7275a to your computer and use it in GitHub Desktop.
Save ptvandi/5f817225792ae16ba42660721fe7275a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sportradar-demo.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Include your Sportradar player -->
<script src="//avplayer-cdn.sportradar.com/dist/latest/avvpl-player.js"></script>
<!-- Include Promethean SDK after your player -->
<script src="https://cdn.promethean.tv/sdk/latest/ptv.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//avplayer-cdn.sportradar.com/dist/latest/styles.css" />
<title>Promethean Testing</title>
<style>
body {
margin: 0;
padding: 0;
}
#playercontainer {
position: relative;
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
</head>
<body class="container">
<!-- Add the main player element -->
<br/>
<br/>
<br/>
<form id="prmetheanForm">
<!--<b>Channel ID</b> <input type="text" class="form-control" id="channelId" value="5c6d7d80a0d01e07f2ce7341">
<br>
<b>Stream ID</b> <input type="text" class="form-control" id="streamId" value="5c6d7ea4a0d01e07f2ce7358">
<br>-->
<b>Stream URL</b>
<input type="text" class="form-control" id="streamURL" value="https://l1tvintegration-lh.akamaihd.net/i/bvbunlimited_1@137618/master.m3u8?start=1509365460&end=1509372720">
<br>
<button type="button" onclick=loadPlayer("5c75392a4c29165dc974681b")>BEST PLAYER</button>
<button type="button" onclick=loadPlayer("5c75393f9fae4e64e619a3a9")>MAN OF THE MATCH</button>
<button type="button" onclick=loadPlayer("5c75394cf4a0945dfb9a7439")>EMAIL FORM</button>
<button type="button" onclick=loadPlayer("5c753971001c385de826b2c1")>HEAD TO HEAD</button>
<button type="button" onclick=loadPlayer("5c753d317633985e1fdc530d")>VOUCHER</button>
<br>
<br>
</form>
<div id="sr-player"></div>
<!-- Initialize the player and Promethean SDK -->
<script>
// $("#prmetheanForm").submit((e) => {
let player;
let ptvsdk;
function loadPlayer(streamId) {
if (ptvsdk) {
ptvsdk.dispose();
}
if (player) {
player.remove();
}
console.log("streamId", streamId);
// let channelId = $("#channelId").val().trim();
let channelId = "5c6d7d80a0d01e07f2ce7341";
// let streamId = $("#streamId").val().trim();
let streamURL = $("#streamURL").val().trim();
let config = {
id: 'sr-player',
handlers: ['html5', "hls"],
autoplay: true,
mute: false,
volume: 30,
loglevel: 3,
enableSeekForward: false,
skin: {
theme: 0,
customLayout: {
controlsLeft: ["rewind/1"]
},
colors: {
"icon-button-hover": "#FFE600",
"label-active": "#FFE600",
"toggle-button-active": "#FFE600",
"toggle-button-text-active": "#000000",
"slider": "#FFE600"
}
},
timeline: "./configs/timeline.json",
streamUrl: streamURL
};
// Create an instance of the Sportradar player.
player = new avvpl.setupPlayer(config);
// Create instance of ptv
ptvsdk = new PTV(player, {
channelId: channelId,
streamId: streamId,
debug: true,
bypassGeoBlock: true
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment