javascript - Calculate percentage of youtube video viewed with API - Stack Overflow

admin管理员组

文章数量:1289601

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

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

• javascript
• youtube
• youtube-api

Share Improve this question Follow edited Aug 2, 2012 at 10:16 DaveR asked Aug 2, 2012 at 10:03 DaveRDaveR 2,48311 gold badge2121 silver badges3939 bronze badges 3

• I think it's more likely that someone will turn on the video and leave the room than watch the first minute five times. – Ian Hunter Commented Sep 4, 2012 at 22:02
• this is a really interesting question - I'm trying to do the same thing for my own online courses - did you get the answer described below to work? – Sam Joseph Commented Dec 21, 2012 at 13:37
• Hi Sam, so the solution below - works . . . sort of. The main function just calculates the current percent through the video you are. So if you jumpt to the 90% point in the video it would be marked as plete. I think there must be a better way . . . – DaveR Commented Dec 22, 2012 at 14:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 % plete
            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.pleted) 
            {   
               if(c>=80) { _gaq.push(['_trackEvent', 'Video Status', t,'Complete']); ytp.pleted=true; } // or do something else
            }

         }

I'm using the Angular YouTube embed module for AngularJS (found here https://github./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 pleted 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));
       };

本文标签： javascriptCalculate percentage of youtube video viewed with APIStack Overflow