I am producing an online course of videos and online exercises and would like people to be able to log in and track their progress.
Is there are way that I could m
How about something like this:
var i; //Global variable so that you can reset interval easily
function onYouTubePlayerReady(playerid)
{
ytp = document.getElementById("ytvideo"); //get player on page
ytp.d = ytp.getDuration(); //get video duration
i = setInterval(checkPlayer, 5000); //check status
}
function onplayerReset()
{
clearInterval(i);
}
function checkPlayer()
{
var p = ytp.getCurrentTime(); //get video position
var d = ytp.d; //get video duration
var c = p/d*100; //calculate % complete
c = Math.round(c); //round to a whole number
var t = document.getElementById('videotitle').innerHTML;
if(ytp.isReset) { c = 0; }
ytp.c=c;
if(!ytp.completed)
{
if(c>=80) { _gaq.push(['_trackEvent', 'Video Status', t,'Complete']); ytp.completed=true; } // or do something else
}
}
I'm using the Angular YouTube embed module for AngularJS (found here https://github.com/brandly/angular-youtube-embed). But this solution would work the same for pure Javascript/YouTube API calls. I just don't feel like re-writing my solution.
Basic concept is that you are slicing the entire length of the video into arbitrarily sized segments. In this sample solution I am splitting a video into a series of 10 second slices. Every 5 seconds a timer checks the current time in the player corresponding to its slice. It is important that you test more frequently than the length each individual slice represents.
The getPctCompleted() method will give you the completed ratio of the length of the video in total, regardless of if the user jumps to the end of the video.
BUT, an advanced user will always be able to spoof this. So this really isn't "proving" someone watched anything. It is untrusted input just like any other input from a user.
$scope.analyzer = {};
$scope.timeElapsed = 0;
$scope.videoLength = 0;
$scope.$on('youtube.player.playing', function($event, player) {
$scope.videoLength = player.getDuration();
$scope.player = player;
//start polling
setInterval(function() {
$scope.timeElapsed = $scope.player.getCurrentTime();
$scope.analyzer[parseInt($scope.timeElapsed / 10)] = true;
$scope.$apply();
}, 5000);
});
$scope.getPctCompleted = function() {
return Object.keys($scope.analyzer).length / (parseInt($scope.videoLength / 10));
};