<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 a specific time</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>
</div>
<div id="playerID" style="wiXdth:400px;">...</div><script type="text/javascript">
  var cpo = []; cpo["_object"] ="playerID"; cpo["_fid"] = "A4HAcLOLOO68!AkFDa-TNxBSy"; 
  var _cpmp = _cpmp || []; _cpmp.push(cpo);
  (function() { var cp = document.createElement("script"); cp.type = "text/javascript";
  cp.async = true; cp.src = "//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 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(79); // 79 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.