Auto play, Loop Video, Time Calculation, Custom Video Player

The below blog is outdated.Please refer the player events API page from below mentioned 3 document links..

Many a times, video streaming sites look to autoplay the video through the video player as soon as the page is loaded. Also, you may wish to loop the media in the video player and present the content again and again to the same viewer. It is generally desired that the bandwidth does not get consumed again on the same page when a video is repeated.

Some of you may want to hide player skin or use custom colors and controls for the video player. Certain times, you will need to get total time viewed by each viewer for each video to put certain restrictions on the user.

VdoCipher along with secure video streaming aims to give a complete suite to our customers to make a custom player. Here are the details for the following functionalities. Do check our embed api first to see how to embed videos.

  1. Autoplay in video player

    Here is the code –

    window.onVdoCipherAPIReady = function(){
       var videos = vdo.getObjects(); // use global variable vdo to query
       var video = videos[videos.length - 1];
       video.addEventListener('loaded', function(){
           video.start(); // set video to autoplay

    Just add this to your HTML will cause the video to autoplay

  2. Loop Video in player – Replay the video when it reaches end

    window.onVdoCipherAPIReady = function(){
       var videos = vdo.getObjects(); // use global variable vdo to query
       var video = videos[videos.length - 1];
       video.addEventListener('end', function(){
  3. Time Calculation per video playback

<div id="vdo<?= $OTP ?>" style="height: 300px; width: 520px;"></div>
<input type="text" id="totalPlayed" value="" />

/// this is the embed code

    (function(v,i,d,e,o){v[o]={}; v[o].a = v[o].a || function V(a){ (v[o].d=v[o].d||[]).push(a);};
    if(!v[o].l) { v[o].l=1*new Date(); a=i.createElement(d), m=i.getElementsByTagName(d)[0];
    a.async=1; a.src=e; m.parentNode.insertBefore(a,m);}
        o: "<?= $OTP ?>",

/// this is the script

function onVdoCipherAPIReady(){
    console.log("VdoCipher API init");
    var videoObjects = vdo.getObjects();
    var video_ = videoObjects[0];
    video_.addEventListener("ready", function(data){
        console.log("ready event called" , data);
    video_.addEventListener("progress", function(data){
        document.getElementById('totalPlayed').value = data.totalPlayed;

Note: Make sure you are using the latest embed script in your code as described at

4. Some useful player events to capture

Returns the complete list of vdocipher videos ever loaded on page

var videoObjects = vdo.getObjects();

Go the proper index. In most cases, the last embedded video is required

var video_ = videoObjects[videoObjects.length -1];

Pause and Resume

video_.pause()               // pause
video_.resume()              // resume
Listening to events:
To get the start of a video –
var videos = window.vdo.getObjects();
var video = videos[videos.length - 1]; // use the last added video
video.addEventListener('start', function() {
    console.log('video has started');
Similarly. replace ‘start’ in the above code for the below events for –
  • “end”
  • “start”
  • “resume”
  • “pause”
  • “mute”
  • “unmute”
  • “changeVolume”

5. Custom Video Player – Beta Feature

This is the link to custom video player – the colors, controls, themes, call to actions on the video player all can be customized.

For a free full version 5GB  secure video streaming, custom video player trial, Sign up at VdoCipher.


Custom Video Player

Custom Video Player – Autoplay, Loop video

You may also like...