How to Customize Your Player: Cincopa Video Player API Controls

Many of Cincopa’s most powerful video player features are available through our API. Developers can offer users a flexible, intuitive control of video content using a simple set of HTML events.

You can see a live example of how our API player controls work

How to Add Cincopa Video Player Buttons Through the API

One of the most effective ways to give users control over video content is by integrating a button block into the player. Cincopa lets developers do this using the following HTML tag:

<div class="button-block">

You will also need to add the corresponding PlayerAPI function in order for the buttons to work:

function playerAPI(){
  var galleryWrapID = 'playerID';
  if (cincopa && cincopa.getGalleryById(galleryWrapID) && cincopa.getGalleryById(galleryWrapID).getSkin().go.playerAPI){
    console.log(cincopa.getGalleryById(galleryWrapID).playerAPI, "playerAPI")
    // console.log(cincopa.getGalleryById(galleryWrapID).playerAPI())
    return cincopa.getGalleryById(galleryWrapID).getSkin().go.playerAPI;
  } else{
    return false;
  }
}

Simply include the button and function script for any of the following commands to include it as an on-page control:

1. Play

You can include an on-screen play button using the following scripts:

Div Tag: 

<button onclick="playVideo()">Play</button>

Function: 

function playVideo() {
    playerAPI() && playerAPI().play();
}

2. Pause

Incorporate an on-screen pause button using the following scripts:

Div Tag: 

<button onclick="pauseVideo()">Pause</button>

Function: 

function pauseVideo() {
    playerAPI() && playerAPI().pause();
}

3. Jump +10 Seconds and Jump -10 Seconds

Add in Jump buttons using the following two scripts. Note that the function script includes jumping ahead and backwards.

Div Tags: 

<button onclick="jumpToSec('forward')">Jump +10sec</button>
<button onclick="jumpToSec('backward')">Jump -10sec</button>

Function: 

function jumpToSec(jumpDirection) {
  if (playerAPI()) {
    var currentTime = playerAPI().currentTime();
    if (jumpDirection === "forward") {
      playerAPI().setCurrentTime(currentTime + 10);
    } else {
      playerAPI().setCurrentTime(currentTime - 10);
    }
  }
}

4. Jump to a Specific Time

You can let users jump to a specific part of your video using the following script:

Div Tag: 

<button onclick="jumpToSpecificSec()">Jump to a specific time</button>

Function: 

function jumpToSec(jumpDirection) {
  if (playerAPI()) {
    var currentTime = playerAPI().currentTime();
    if (jumpDirection === "forward") {
      playerAPI().setCurrentTime(currentTime + 10);
    } else {
      playerAPI().setCurrentTime(currentTime - 10);
    }
  }
}

5. Mute and Unmute

Let users easily mute audio and unmute content using the following scripts.

Div Tags: 

<button onclick="toggleMute('mute')">Mute</button>
<button onclick="toggleMute('unmute')">Unmute</button>

Function: 

function toggleMute(command) {
  playerAPI() && playerAPI().toggleMute(command);
}

6. Toggle Subtitle On and Off

If your video includes subtitles, you can let users toggle them on and off using the following script:

Div Tags:

<button onclick="subtitleToggle('on')">Subtitle On</button>
<button onclick="subtitleToggle('off')">Subtitle Off</button>

Function: 

function subtitleToggle(command) {
  playerAPI() && playerAPI().subtitleToggle(command);
}

7. Set Subtitle to English or Spanish

Give your videos multilingual subtitles using the following scripts.

Div Tags: 

<button onclick="selectSubtitle('en')">Subtitle to English</button>
<button onclick="selectSubtitle('es')">Subtitle to Spanish</button>

Function: 

function selectSubtitle(language) {
  playerAPI() && playerAPI().selectSubtitle(language);
}

8. Fullscreen Toggle On

Implement a fullscreen toggle button using the following script:

Div Tag: 

<button onclick="enterFullScreen()">Fullscreen in</button>

Function: 

function enterFullScreen() {
  playerAPI() && playerAPI().enterFullScreen();
}

9. Fullscreen Toggle Off

Lets users turn off fullscreen mode using this script:

Div Tag: 

<button onclick="exitFullScreen()">Fullscreen out</button>

Function: 

function exitFullScreen() {
  playerAPI() && playerAPI().exitFullScreen();
}

10. Go to Chapter

Separate video content into chapters and allow users to navigate your content using the following scripts:

Div Tags:

<button onclick="goToChapter(1)">Go To Chapter 1</button>
<button onclick="goToChapter(3)">Go To Chapter 2</button>
<button onclick="goToChapter(3)">Go To Chapter 3</button>

Function:

function goToChapter(index){
  playerAPI() && playerAPI().goToChapter(index);
}

11. Control Player Speed

You can change the video play speed using the following scripts:

Div Tags:

<button onclick="playbackSpeed(2)">Speed x2</button>
<button onclick="playbackSpeed(0.5)">Speed x0.5</button>
<button onclick="playbackSpeed(1)">Speed x1(normal)</button>

Function:

function goToChapter(index){
  playerAPI() && playerAPI().playbackSpeed(speed);
}