The following is an example of how to use Cincopa's player API, this API will work on all players and templates, more info support@cincopa.com
<div class="button-block">
   <button onclick="playVideo()">Play</button>
   <button onclick="pauseVideo()">Pause</button>
   <button onclick="jumpToSec('forward')">Jump +10sec</button>
   <button onclick="jumpToSec('backward')">Jump -10sec</button>
   <button onclick="jumpToSpecificSec()">Jump to 00:42</button>
   <button onclick="toggleMute('mute')">Mute</button>
   <button onclick="toggleMute('unmute')">Unmute</button>
   <button onclick="subtitleToggle('on')">Subtitle On</button>
   <button onclick="subtitleToggle('off')">Subtitle Off</button>
   <button onclick="selectSubtitle('en')">Subtitle to English</button>
   <button onclick="selectSubtitle('es')">Subtitle to Spanish</button>
   <button onclick="enterFullScreen()">Fullscreen in</button>
   <button onclick="exitFullScreen()">Fullscreen out</button>
   <button onclick="goToChapter(1)">Go To Chapter 1</button>
   <button onclick="goToChapter(3)">Go To Chapter 3</button>
    <button onclick="goTo(2)">Go To 2 Video </button>
    <button onclick="prev()">Prev Video</button>
    <button onclick="next()">next Video</button>
</div>
<div id="playerID">...</div><script type="text/javascript">
var cpo = []; cpo["_object"] ="playerID"; cpo["_fid"] = "AIEAPxOcrJt4"; // A4LA1pulIDe1
var _cpmp = _cpmp || []; _cpmp.push(cpo);
  (function() { var cp = document.createElement("script"); cp.type = "text/javascript";
  cp.async = true; cp.src = "https://www.cincopa.com/media-platform/runtime/libasync.js";
  var c = document.getElementsByTagName("script")[0];
  c.parentNode.insertBefore(cp, c); })(); </script>

<script>
  

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;
  }
}
function playVideo() {
	playerAPI() && playerAPI().play();
}

function pauseVideo() {
  playerAPI() && playerAPI().pause();
}
function goTo(index) {
  playerAPI() && playerAPI().goTo(index);
}
function prev() {
  playerAPI() && playerAPI().playPrev();
}
function next() {
  playerAPI() && playerAPI().playNext();
}
function jumpToSec(jumpDirection) {
  if (playerAPI()) {
    var currentTime = playerAPI().currentTime();
    if (jumpDirection === "forward") {
      playerAPI().setCurrentTime(currentTime + 10);
    } else {
      playerAPI().setCurrentTime(currentTime - 10);
    }
  }
}

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

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

function jumpToSpecificSec() {
  if (playerAPI()) {
	  playerAPI().setCurrentTime(42); // 42 seconds from start
  }
}

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

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

function selectSubtitle(language) {
  playerAPI() && playerAPI().selectSubtitle(language);
}
  
function goToChapter(index){
  playerAPI() && playerAPI().goToChapter(index);
}
  
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.