Using Tin Can API in video: Complete Documentation

Tin Can API is a specification for learning technologies that enables Learning Management Systems to collect data from various learning activities that a student may undertake. Tin Can API has succeeded SCORM (Sharable Content Object Reference Model) as the new standard for learner analytics.

tin can api in video

Requirements for Tin Can API

In Tin Can API any learner activity on the web may be integrated and logged to the LMS. This includes activities such as reading a blog and watching a video online. For Tin Can API to succeed, all learning activities that a learner performs should be able to transmit learning data to the LMS.

Statements in the Tin Can API are rendered in the form Noun Verb Activity. For example if Learner A has completed watching a video on “Machine Learning: Supervised Learning Part 1”, the corresponding Tin Can API statement would be:

  • Learner A completed Machine Learning: Supervised Learning Part 1

Tin Can API with videos

The motive of Tin Can API is to have maximum feedback for user experience and act on to improve the key metrics. As in case with video, fetching in side video data becomes quite tricky owing to the variety and scale of actions performed by viewers on a video.

VdoCipher as a part of its secure video hosting service,  currently provides viewer data points on all the relevant analytics requirement for Tin Can API

Below are some of the prominent actions of viewers on video (start, pause, end, seek, progress, repeat, load, buffer, view) which are a part of Tin Can API and VdoCipher provides direct JavaScript codes for them.

It is interesting to note that there is always a debate amongst content creators and marketers on what should be taken as a view for the video ? Should just clicking on the play button be considered sufficient to be counted as a view ? Some times it is decided to take say 10 seconds of playback or 2 mins of playback as a view. With the information collected by VdoCipher’s start and progress event trackers you can easily collect viewer information for your particular definition of a video view.

Start, End, Pause, Mute, Unmute events on video player

Please check this javascript code to capture the play and pause events from the embedded video player:
<script>		
function onVdoCipherAPIReady(){
    console.log("VdoCipher API init");
    var videoObjects = vdo.getObjects();
    var video_ = videoObjects[videoObjects - 1];
    video_.addEventListener("resume", function(){
        console.log("ready event called" , video_.time);
    });
    video_.addEventListener("pause", function(data){
        // document.getElementById('totalPlayed').value = video_.totalPlayed;
    });
    }
</script>
You can similarly listen for “start”, “end” and “mute”, “unmute”.

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

<script>
    (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);}
    })(window,document,'script','//de122v0opjemw.cloudfront.net/vdo.js','vdo');
    vdo.a({
        o: "<?= $OTP ?>",
    });
</script>

/// this is the script

<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;
    });
    }
</script>
 
Note: The function wrapper with onVdoCipherAPIReady is needed only when it is part of the document load. If this script is to be run after document load, you can run it directly.
Let us know for any custom tracking functionality you require. Most of them are possible with a combination of the above scripts.
  • Cultiva Tus Ideas Ingeniería C

    GREAT!!!
    Would it be possible to send this notifications to AgileCRM?