Skip to main content

Change the Control Bar

What is the Control Bar#

The control bar is the bar with the play/pause toggle and the progress. If you have the "Pro" version of the player you can modify the visibility of the control bar and disable and enable all the features.

Prerequisites#

Embed the video#

First you need to embed a video. See the Getting started example for the HTML.

let video_wrapper = document.querySelector("#video-wrapper")
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
)
caution

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

Hide the control bar#

You can completely hide and disable the control bar in the player. The user does not have any option to control the video playback unless you add controls yourself.

player.control_bar.hide()

To (re-)enable the control bar:

player.control_bar.show()

Specify the control options#

See the image for a breakdown (full featured screenshot).

player controls

LabelDescription
playPausePlay and Pause the content
seekBackSeek back 10 seconds
seekForwardSeek forward 10 seconds
volumeChange the volume of the content
currentTimeYour current time into the content
progressBarA visual element to let you see how much of the content you still have left
remainingTimeHow much time you still have remaining of the content
chromecastCast the content to a local chromecast enabled device
playbackRateSelect the rate at which the content is played.
chaptersSelect the different chapters integrated into the content
descriptionToggle the audio description for people with visual impairments
subtitlesSelect the desired subtitles if applicable
audiotracksSelect the desired audio track if applicable
qualityChange the video quality of the content
pipenable Picture-in-Picture player
fullscreenEnable the content to go into Fullscreen mode

The way it works is that you send a object with all the changes you would like to make. So for example iof you want to disable the play and pause toggle you only have to send that in the object. Like this:

player.control_bar.controls({ 'playPause': false })
// The player will remove the playPause toggle from the bar.

Another example for all options enabled (like in the screenhsot above)

player.control_bar.controls({
'playPause': true,
'seekBack': true,
'seekForward': true,
'volume': true,
'currentTime': true,
'progressBar': true,
'remainingTime': true,
'chromecast': true,
'playbackRate': true,
'chapters': true,
'description': true,
'subtitles': true,
'audiotracks': true,
'quality': true,
'pip': true,
'fullscreen': true,
})