Track how long a user has watched a video

Question

I teach an online course, and I need to make sure my students actually watch a certain video. Now, I understand that everything can be defeated, but what I'm looking is the 80/20 rule were I can make a few tweaks to start on the journey of accountability for my students.

Q1: Is there a way via JavaScript to fire an event if the current window loses focus?

Q2: Is there a way to fire an event when the video finishes playing?

Q3: Is there a way to make sure the video was played all the way through instead of the student clicking on the end of the timeline?

I feel compelled to say (again), please don't answer this questions with something like "you're wasting your time, the students will defeat anything that you do".

Answer 1

What is the player you are using. If you are using open source video players like JWPlayer or Flow Player. You can track events. I personally prefer flow player and you can use google analytics to track the duration and any other task you want on the page.

as you have an authentication mechanism on the page you can get the username of the student (or an identifier). Push events to google analytic with this as a label and you can track each and everything the student do including the links he clicked, duration what played, when he played ...

• you can setup google analytic http://www.google.lk/analytics/ its Free :)
• Event tracking guide https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
• Flow player events http://flash.flowplayer.org/documentation/events/player.html

example setup

        <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '#########']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

      })();

    </script>

To track

_gaq.push(['_trackEvent', 'Videos', 'Play', 'Gone With the Wind']);

this is part of the live code i took from http://vsp.ideawide.com/ in which I track some of those events.

var events = {
    clip : {
        onStart: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Play", defaults.source]);
        },


        onPause: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Pause", defaults.source, parseInt(this.getTime())]);
        },

        onResume: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Resume", defaults.source, parseInt(this.getTime())]);
        },

        onSeek: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Seek", defaults.source ]);
        },

        onStop: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Stop", defaults.source, parseInt(this.getTime())]);
        },
         onFinish: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Finish", defaults.source]);
        }
    },
    onFullscreen: function() {
        _gaq.push(['_trackEvent',"Videos", "Full Screen", defaults.source]);
    },
    onError: function(errorCode , errorMessage) {
        _gaq.push(['_trackEvent',"Videos", "Error", defaults.source, errorCode ]);
    }
}

As a final note with analytic properly setup with a proper player you can improve your 80/20 to 99/1.

Answer 2

This is assuming HTML5 video using the video tag.

player = document.getElementById("player");

//Get current percent complete. You may want to check for 95%+ rather than 100%.
setInterval(function(){
    percentComplete = player.currentTime/player.duration;
}, 300); 

window.onblur = function() {
//this will be called when the window loses focus
};

You can call the video tag without the controls attribute to disable the seek bar. You can then trigger play on click using the following:

player.play();

Answer 3

Problems with the initial approach

I teach an online course, and I need to make sure my students actually watch a certain video.

Here's the issue. Your requirement is that students actually watch a video, but the best we can do programmatically is make sure that a video was sent by a server and received by a client. Aside from using extreme measures like facial recognition and audio loopback, you can't be sure that anyone is watching it, or that the intended viewer is watching it, or that anyone is listening. The student can simply start the video and walk away.

That might sound like a technicality, but really it's an important distinction. What you've got is the equivalent of a system designed to make sure someone reads a book, but all the system can do is check whether the book is open or closed at any given time.

Security

Now, I understand that everything can be defeated, but what I'm looking is the 80/20 rule were I can make a few tweaks to start on the journey of accountability for my students.

Everything can be defeated with enough effort, but the proposed solution can be defeated almost effortlessly. If it's easier for your average user to cheat the system than to use it legitimately, it's probably not worth implementing.

An alternative approach

Instead of focusing on whether the browser is running the video, consider shifting focus back to the user. By requiring some specific user interaction while the video is being displayed, you'll be able to have a much higher level of confidence in the system.

The simplest way to do this would be to split the video up into several small parts, displaying a link to the next video after each one plays.

You could then write a small script to show the time between requests for that series of videos (per user), and flag any requests that were too far apart or too close together given the length of the segments (or compared to the average if that data isn't available for some reason). You can pull this data right from the server logs if you have access to them, or you can record it yourself.

Comprehension

If you want to go the extra step and test comprehension (or retention), this alternative approach would be simple to extend. Instead of having one link to the next video, have several links to it, in the form of answers to a question. If you're worried about students sharing the answers, don't tell them whether they got it right, just send them to the next video. You can look at this data later and decide whether you want to use it and how you want to curve it.

Answer 4

Maybe do a setTimeout for the length of the video and fire an event once the length of the video has passed.

Try this to detect when the window loses focus:

window.onblur = function() {
   //do something here...
};

If you're really worried about the accuracy of setTimeout, maybe try this:

var start = (new Date).getTime();

function CheckTime() {

   var diff = (new Date).getTime() - start;
   if (diff >= videoLength) {
       FireVideoDoneEvent();
   }
   else {
       setTimeout(function() {
           CheckTime();
       }, 1000);
   }

}

Answer 5

Q1: look for event onblur

Q2: that would depend on your player. There are flash video players you can call a javascript function with ExternalInterface.call("myFunctionName()"); from AS3

Q3: I would try to find a flash player that has all that options but my solution is more as3 to javascript.

I hope this may help you!

Answer 6

1. handle window.onblur, as mentioned
2. you'll get the 'ended' event fire when video is done
3. you can call mediaElement.played.end() to get # of secs played in browser.

See here and here