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.

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

<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>

Time Calculation per video playback

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

<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>

<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>