Skip to main content

Controlling the player

Prerequisites#

What are controls#

You probably noticed that there are control buttons to start an stop the playback of the video. There are also volume controls, subtitles and several other use-full controls.

If you have the "Pro" version of the player you can control the video inside the iFrame that gets loaded. Normally it is not possible to communicate with the page inside the iFrame, but if you use our SDK and have the licence for a "Pro" version of the player, you can!

Setup basic controls#

First you should embed the video almost like in the getting started guide.

Embed the video#

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.

Create the buttons#

You need some buttons, we will assume you use Bootstrap as an CSS framework, but in reality it does not matter what you use.

<div>
<button class="btn btn-primary">Play</button>
<button class="btn btn-primary">Pause</button>
</div>

You should see two additional buttons now in your browser. Lets add the JavaScript magic.

<div>
<button class="btn btn-primary" onclick="player.play()">Play</button>
<button class="btn btn-primary" onclick="player.pause()">Pause</button>
</div>

When you click the play and pause you will see that the video start playing stops.

List of controls#

This is the full list of controls and their parameters.

Playback controls#

Play the video and seeking.

player.play()
// Start playing at 60 seconds
player.play(60)

Pause a playing video.

player.pause()

Toggle the play and pause.

player.playPause()

Check if the player is currently playing a video.

player.isPlaying() // -> true or false

Volume controls#

Volume up and down, by 10% increments.

player.volumeUp()
player.volumeDown()

You can also set the volume to a certain level. Note that full volume is 1, and half volume is 0.5.

player.volume(0.5)

You can also mute the video with one function call:

player.mute()

To see if the video is muted (volume 0):

player.isMuted()

Breakout controls#

You can force the player to go into full screen mode (takeover the entire screen):

// To see if the player is already in full screen
console.log(player.isFullscreen()) // true or false
// Send the full screen request to the player (you can only ask, but if the user blocks it, too bad)
player.requestFullscreen()
// Exit the full screen mode
player.exitFullscreen()

Same goes for the Picture in Picture mode. This is not available on all platforms by the way, but most modern browsers have build in support.

// To see if already Picture in Picture
console.log(player.isInPictureInPicture()) // true or false
// Send the picture in picture request (can be disabled or blocked by browser)
player.requestPictureInPicture()
// Exit Picture in Picture mode
player.exitPictureInPicture()

If you want to know for sure your action has worked, you can check the state with isInPictureInPicture() or isFullscreen. There are also events fired when this happened, you can also listen to that.