Skip to main content

Adding your own theme

Prerequisites#

What are themes#

We see themes as a way of making the player look like your own. The reality of using a player from an external vendor is that most of the time it looks like a stranger in the cloud on your webpage.

We've introduces dynamic themes so you can adjust the player's look and feel whenever you like, including after it has been loaded(!!!).

Setup basic Player#

First you should embed the video almost like in the getting started guide. Please note that we prepare an empty options variable that we will be using later on.

Embed the video#

let video_wrapper = document.querySelector("#video-wrapper");
let options = {};
let player = new PrivacyPlayerPro( // Note the "Pro"
"//rrr.sz.xlcdn.com/?account=demo&file=sintel-surround.smil&type=streaming&service=wowza&poster=sintel-surround.jpg&output=player",
video_wrapper, true, true, options
);
caution

Please note that we are using PrivacyPlayerPro and not PrivacyPlayer like in the Getting started example.

Setting a theme#

You probably want to set the theme right from the start of the player. You can change the theme dynamically but for most use cases it will be sufficient to set the theme on player initialization.

We will be updating the options that we left empty when embedded in the first section on the page.

let options = {
'theme': {
// Making the position indicator Jet-Stream orange
'progressBarPosition': 'rgb(243, 149, 1)',
// And replace the play button with a custom one
'playButtonImageUrl': 'https://docs.jet-stream.com/docs/privacy-player/play_button_clean.png'
},
}

The options you can use are: player colors

KeyDefault valueDescription
progressBarBackground"rgba(244, 149, 0, 0.5)"Background of the progress bar
progressBarPlayed"#f49500"Played part of the progress bar
progressBarLoaded"rgba(244, 149, 0, 0.5)"Loaded part of the progress bar
progressBarPosition"#ffffff"Position circle of the progress bar
volumeBarBackground"#f49500"Volume bar background color
volumeBarLevel"#f49500"Volume level color
overlayText"#f49500"Color of the text overlay (title)
controlBarBackground"rgba(75, 85, 92, 0.7)"Background of the control bar
controlBarButtons"#ffffff"Button color of the control bar
controlBarText"#ffffff"Text in the control bar
tip

You can use any CSS color property since the underlying system is based on JavaScript CSS properties. So that includes gradients etc...

Change the theme dynamically#

You can change the theme also when the player is running. You can use your creativity to the full extend to make up use cases for this, or have a look at our examples.

Note that you have to wait until the player has a ready state of true before these functions can be used. You can implement the player.ready_callback function that gets called when the player switches to the ready state.

Change the colors#

Note that

// Making the position indicator Jet-Stream orange
player.theme.colors({
'progressBarPosition': 'rgb(243, 149, 1)'
// You can add extra theme colors here
});

As you can see it looks a lot like the way you configure the control bar.

If you would like to check the current configuration you can do so by calling the same function without any parameters:

player.theme.colors();

It will show all options, including the values you've set. If you haven't customized it, it will contain null values for each key.

Change the play button#

You can even change the play button dynamically. 9 out of 10 times it's not very use-full since you will probably set it at the initialisation of the player.

// Updating the play button
player.theme.playButtonImageUrl(
'https://docs.jet-stream.com/docs/privacy-player/play_button_clean.png'
);

Dynamic poster frame#

In the management interface you can select a poster frame, but what if you want to set it live or at player initialization. A use case can be to place a screen grab of a livestream as poster frame or if your editors want to switch it last minute for another one.

You can add it to the options at player initialization:

let options = {
'theme': {
// Your theme
},
posterFrameUrl: 'https://<path to poster frame>'
}

Or you can update it dynamically (if you like to swap it for a live grab every 2 seconds for example):

player.posterFrameUrl(
'https://<path to poster frame>'
);