Skip to main content

External play and pause button and hiding the controlBar

In this example the Play and Pause buttons are outside of the player and the control bar is hidden

<!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>
<!-- and some styling -->
<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>
</head>
<body>
<h1>Example with external buttons</h1>
<!-- then we make a div to put the player into-->
<div id="video-wrapper" style="height: 1050px"></div>
<!-- Then we make a div with our 2 buttons -->
<div>
<button class="btn btn-primary" onclick="player.play()">Play</button>
<button class="btn btn-primary" onclick="player.pause()">Pause</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(
"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
)
// And finaly we hide the controlBar of the player, we use the player.ready_callback. when the player is ready the functions between the brackets will be executed
player.ready_callback = function () { player.control_bar.hide() }
</script>
</html>

Live example#