Skip to main content

interactive example

Here is an example of a interactive player with external play, pause, overlay and logo buttons

Live example#

The Code#

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- First we load the SDK -->
<script type='text/javascript' src="//cdn.jet-stream.com/static/pp/2.1.0/privacy-player.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<style>
html, body {
background: none transparent;
}
</style>
</head>
<body>
<!-- then we make a div to put the player into-->
<div style="height: 300px; width: 480px; position: relative; ">
<div id="video-wrapper" style="height: 300px; width: 400px; "></div>
</div>
<!-- Then we make a div with our buttons, we use the functions we talked about in the "Controlling the player" page -->
<div style=" width: 480px; text-align: center">
<button class="btn btn-primary" onclick="player.play()">Play</button>
<button class="btn btn-primary" onclick="player.pause()">Pause</button>
<button class="btn btn-primary" onclick="addOverlay()">Show Overlay</button>
<button class="btn btn-primary" onclick="removeOverlay()">Hide overlay</button>
<button class="btn btn-primary" onclick="player.enableStationLogo('logo.svg', 20, 1)">Show logo</button>
<button class="btn btn-primary" onclick="player.disableStationLogo()">Hide logo</button>
</div>
</body>
<script type="text/javascript">
// in out script tag we make the wrapper and declare the player so that we have something we can controll with all te functions
let video_wrapper = document.querySelector("#video-wrapper")
let player = new PrivacyPlayerPro(
// this is the link to your content
"https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6.smil&type=streaming&service=wowza&sub=readysetrocknroll6_EN.vtt,readysetrocknroll6_NL.vtt&output=player&events=1",
video_wrapper, true, true
)
// now lets add a simple overlay to make a user want to buy a magic bullet
let overlay = false
// we make a function to call later
function addOverlay() {
overlay = document.createElement("div")
// give it some style
overlay.style.cssText = "position: absolute; height: 25%; bottom: 15px; left: 15px; right: 15px; padding: 15px; border-radius: 5px; background-color: rgba(255, 255, 255, .5); transition: opacity 500ms;"
// and some text
overlay.innerHTML = "<a href=\"#\" class=\"btn btn-sm btn-success\">Buy magic bullet</a>"
// and finnaly call it
player.addOverlay(overlay)
}
// we can use this to remove the overlay if we want to
function removeOverlay() {
if (overlay) {
overlay.remove()
}
}
//now when the player.ready_callback is called we want to hide the controlbar, set the video to start playing at 0 seconds and finally enable a station logo overplay.
player.ready_callback = function () {
player.control_bar.hide()
}
</script>
</html>