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
<script src='https://rtcdn.cincopa.com/libasync.js' type='text/javascript'></script>
<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>
   <button onclick="playbackSpeed(2)">Speed x2</button>
   <button onclick="playbackSpeed(0.5)">Speed x0.5</button>
   <button onclick="playbackSpeed(1)">Speed x1(normal)</button>
</div>
<div id="playerID">...</div>
<script type="text/javascript">
cincopa.set_debug(true);
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://rtcdn.cincopa.com/libasync.js";
  var c = document.getElementsByTagName("script")[0];
  c.parentNode.insertBefore(cp, c); })(); </script>

<script>
 
cincopa.registeredFunctions.push({
    func: function (name, data, gallery) {
      gallery.args["iframe"] = "true";
    }, filter: "runtime.on-args"
  });

function playerAPI(){
  var galleryWrapID = 'playerID';
  if (cincopa && cincopa.getGalleryById(galleryWrapID) && cincopa.getGalleryById(galleryWrapID).playerAPI) {
    console.log(cincopa.getGalleryById(galleryWrapID).getSkin().go == cincopa.getGalleryById(galleryWrapID));
    console.log(cincopa.getGalleryById(galleryWrapID));
    console.log(zeGalleryArray);
    return cincopa.getGalleryById(galleryWrapID).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);
}
  
function playbackSpeed(speed) {
  playerAPI() && playerAPI().playbackSpeed(speed);
}

</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.