Using the API

The iframe embed lets you embed your Vdocipher videos and control the player using Javascript. You have access to the essential methods and properties of the players. There are events that you can listen for and execute custom actions in your web application.

1. Adding the script

Add the following script to the html of your web page. This loads the interface that are used to establish communication with the video player. If this script is loaded on-demand later, make sure to wait for the load to complete before calling subsequent methods on the object.

<script src="https://player.vdocipher.com/v2/api.js"></script>

2. Get a reference to the iframe

Note: Assuming the API script (above) is already loaded, otherwise wrap all the below code this in a window.onVdoPlayerV2APIReady() method.

To begin communicating with the player, get a reference to the iframe element. This can be using DOM APIs such as querySelector() or using some view library such as useRef() of ReactJS or ElementRef of Angular.

const iframe = document.querySelector('iframe');

3. Establish communication with the iframe

The script in step 1 provides a VdoPlayer constructor on window object. This constructor returns

const player = VdoPlayer.getInstance(iframe);

// All DOM API supports on player.video
player.video.addEventListener('play', function () {
  console.log('Video is playing');
});

Complete Sample Code using the above

<html>
  <body>
    <iframe
      src="https://player.vdocipher.com/v2/?otp=[[REPLACE_WITH_OTP]]&playbackInfo=[[REPLACE_WITH_PLAYBACKINFO]]&primaryColor=4245EF"
      frameborder="0"
      allow="encrypted-media"
      allowfullscreen
    ></iframe>

    <script src="https://player.vdocipher.com/v2/api.js"></script>
    <script>
      const iframe = document.querySelector('iframe');
      // Creating player instance
      const player = VdoPlayer.getInstance(iframe);

      // All DOM API supports on player.video
      player.video.addEventListener('play', function () {
        console.log('Video is playing');
      });

      // VdoCipher Custom API
      player.api.getTotalPlayed().then(function (data) {
        console.log('Video playback: ', data);
      });
    </script>
  </body>
</html>

VdoPlayer instance

VdoPlayer constructor returns the Player Interface containing two properties as follows

{
  "video": (HTMLVideoElement),
  "api": (VdocipherCustomAPI)
}

Video `[player.video]`

The player.video is a reference of the video element^* of the player, and supports most DOM operations of HTMLVideoElement.

List of supported api on player.video

Sample code for player operations

Operation	Code	Return Type
Play	`player.video.play()`	`Promise<void>`
Pause	`player.video.pause()`	`Promise<void>`
Current Time	`player.video.currentTime`	`Number`

The video element is a proxy element. Most of the properties and methods are available to access except few which will have the constant value NOT_AVAILABLE_ON_API, and all methods are wrapped in the promise.

VdocipherCustomAPI `[player.api]`

These are the custom api, to interact with player apart from the DOM API. Checkout VdocipherCustomAPI to know more.

1. Adding the script​

2. Get a reference to the iframe​

3. Establish communication with the iframe​

Complete Sample Code using the above​

VdoPlayer instance​

Video [player.video]​