Skip to main content

Rapidly changing all colors

Now that we know how to change a single color, let's step it up and change all the colors of the player every 300ms.

Live Example#

As you can see the player has turned into quite the disco, when you combine the setting of the colors with the other functions of our new player you can really make your website stand out!

The code#

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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 2 buttons -->
<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>
</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")
// the starting theme
let options = {
'theme': {
'controlBarText': '#0b2e47',
'controlBarButtons': '#22aca3',
'progressBarBackground': 'rgba(55, 122, 181, .7)',
'progressBarLoaded':'#22aca3',
'progressBarPlayed': '#22aca3',
'volumeBarLevel' : '#22aca3',
'progressBarPosition': '#377ab5',
'overlayText': '#377ab5',
'controlBarBackground': 'rgba( 11, 46, 71, .7)',
'volumeBarBackground' : 'rgba(55, 122, 181 , .7)'
}
}
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, options
)
// when the player is ready we start with changing the color every 0.3 seconds
player.ready_callback = () => {
setInterval(changeColors, 300);
}
function changeColors() {
player.theme.colors({
'progressBarBackground' : random_rgba(.7),
'progressBarLoaded' : random_rgba(1),
'progressBarPlayed' : random_rgba(1),
'progressBarPosition' : random_rgba(1),
'overlayText' : random_rgba(1),
'controlBarButtons' : random_rgba(1),
'controlBarText' : random_rgba(1),
'controlBarBackground' :random_rgba(.7)
});
}
function random_rgba(a) {
let o = Math.round, r = Math.random, s = 255;
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + a + ')';
}
</script>
</html>