How to Control Presentation by Clipstream Player API

You can use Javascript to show or hide elements of the Clipstream UI on a certain video using the methods below.

Default state

By default the Clipstream player will show the following elements:

Name Switch Description
Play / Pause P Play or pause button on the button panel typically showing at the bottom of the video.
Center play button B The round button in the center of the video that will play the video
Center buffering wheel b The spinning icon in the center of the video that shows a buffering state
Progress Bar R The bar showing the duration of the video and a pointer showing the viewer's progress in the video as well as a thumbnail index.
Mute M Mutes any audio track
Zoom Z Button that allows the users to change the video to full-screen mode.

Hide all buttons

Show only the video itself without any UI / buttons. 

Note: Using Hide all means no buttons will be visible so the user must know to click on the video to play it or the video must be set to autoplay or use a Javascript method to play the video.

Syntax:

window.clipstream.players[0].hideall()

example:

<a href="#" onClick="window.clipstream.players[0].hideall();">Click to hide all UI</a>

Show only specified buttons/UI elements

Show only certain elements and hiding everything not specified. 

Note: using showonly('') with no buttons specified is the same as hideall(); 

Syntax:

window.clipstream.players[0].showonly('PRMZBb'); 

example:

<a href="#" onClick="window.clipstream.players[0].showonly('R');">Click to hide all elements of this player except the progress bar</a>

Note: If no buttons are specified the user must know to click on the video to play it or the video must be set to autoplay or use a Javascript method to play the video.

Example of hiding or showing buttons using onLoad events

Hiding buttons using onLoad and the Clipstream Player API

 

 

 

 

 

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk