Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calculate percentage of youtube video viewed with API

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 measure the percentage of a youtube embed that someone had watched and mark it as complete if they had viewed, say more than 80%?

My best idea so far is to use getCurrentTime() when the player's state changes to PLAYING and then again every five seconds or so adding the difference to some kind of total. However if someone watched the first minute five times they'd end up with a ticked off video, even though they had not viewed the whole thing.

Is there a more elegant solution to calculate the % of a video viewed, rather than the above method that calculates the amount of time spent viewing the video?

like image 784
DaveR Avatar asked Aug 02 '12 10:08

DaveR


2 Answers

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
            }

         }
like image 162
McKev Avatar answered Sep 19 '22 09:09

McKev


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));
       };
like image 21
Bon Avatar answered Sep 18 '22 09:09

Bon