- Knowledge of HTML
- The "Pro" version of the player
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(!!!).
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.
Please note that we are using
PrivacyPlayerPro and not
PrivacyPlayer like in
the Getting started example.
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.
The options you can use are:
|Background of the progress bar|
|Played part of the progress bar|
|Loaded part of the progress bar|
|Position circle of the progress bar|
|Volume bar background color|
|Volume level color|
|Color of the text overlay (title)|
|Background of the control bar|
|Button color of the control bar|
|Text in the control bar|
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.
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:
It will show all options, including the values you've set. If you haven't customized it, it will
null values for each key.
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.
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:
Or you can update it dynamically (if you like to swap it for a live grab every 2 seconds for example):