Developer API – Get Progress Analytics From Video Player

The following API helps users to access analytical data relating to the video that is being played. Using our API,  you will access that data if you use certain keywords as an ID in your HTML code.

The following are the keywords used in this example as an ID for your HTML tag:

current_completion_percent – 0% (This is where you will receive the data regarding the current progress of the video). Example: <span id=”current_completion_percent”>0</span>%

 

completion_percent – 0% (This is where you will receive the data relating to the videos you have actually watched). Example: <span id=”completion_percent”>0</span>%

 

hm_range – “…” (This is where you will receive the data with a comma-separated range. It will appear in the form of seconds of actual play and how much each segment was played. Jump back and forth in the video to see the changes).
Example: <span id=”hm_range”>…</span>

 

duration_sec – 0 sec Example: <span id=”duration_sec”>0</span> sec

 

current_progress_sec 0 sec Example: <span id=”current_progress_sec”>0</span>

 

completion_sec 0 sec Example: <span id=”completion_sec”>0</span>

 

Here’s an example of HTML and JavaScript using the API explained above:

HTML Code:

<div id="main-div">
   <div class="div1">
      <p class="data-title"> Current Completion Percent: </p>
      <p class="data-value"> <span id="current_completion_percent">0</span>% </p>
   </div>
   <div class="div2">
      <p class="data-title">Completion Percent:</p>
      <p class="data-value"> <span id="completion_percent">0</span>% </p>
   </div>
   <div class="div3">
      <p class="data-title"> HM Range: </p>
     <p class="data-value"> <span id="hm_range">0</span>% </p>
   </div>
   <div class="div4">
      <p class="data-title">Duration Seconds:</p>
      <p class="data-value"> <span id="duration_sec">0</span>% </p>
   </div>
   <div class="div5">
      <p class="data-title"> Current Progress Seconds: </p>
      <p class="data-value"> <span id="current_progress_sec">0</span>% </p>
   </div>
   <div class="div6">
      <p class="data-title">Completion Seconds: </p>
      <p class="data-value"> <span id="completion_sec">0</span>% </p>
   </div>
</div>
<div id="cp_widget_1539590707155">...</div>

 

To make the data appear in a more aesthetically-appealing form, you can add your own CSS customizations.

CSS Code:

#main-div div {
   margin: 5px;
   padding: 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
   border: 1px solid green;
   width: 200px;
   border-radius: 10px;
  background-color: #7eae7e;
}

#main-div {
   display: flex;
   justify-content: center;
   background-color: #cbebb1;
}

 

JavaScript Code (With API):

<script type="text/javascript">
var cincopa = cincopa || {};
cincopa.registeredFunctions = cincopa.registeredFunctions || [];
cincopa.registeredFunctions.push({
   func: function (name, data, gallery) {
      var stats = gallery.get_video_play_stats(data);
      document.getElementById("current_completion_percent").innerHTML = stats.current_completion_percent;
      document.getElementById("completion_percent").innerHTML = stats.completion_percent;
      document.getElementById("hm_range").innerHTML = stats.hm_range;
      document.getElementById("duration_sec").innerHTML = stats.duration_sec;
      document.getElementById("current_progress_sec").innerHTML = stats.current_progress_sec;
      document.getElementById("completion_sec").innerHTML = stats.completion_sec;
   }, filter: "video.timeupdate"
});
cincopa.registeredFunctions.push({
   func: function (name, data, gallery) {
      //gallery.set_video_play_stats(data, "0-7,8-13:2,14-16"); // example of how to set play stats
   }, filter: "video.load"
});
</script>

 

JavaScript Code (Embed Gallery):

<script type="Text/Javascript">
var cpo = []; cpo["_object"] ="cp_widget_1539590707155"; cpo["_fid"] = "A4HAcLOLOO68!AYJDnKyNYNPX";
var _cpmp = _cpmp || []; _cpmp.push(cpo);
(function() { var cp = document.createElement("script"); cp.type = "text/javascript";
cp.async = true; cp.src = "//wwwcdn.cincopa.com/media-platform/runtime/libasync.js";
var c = document.getElementsByTagName("script")[0];
c.parentNode.insertBefore(cp, c); })();
</script>

 

Output Screenshot: