Track how long a user watched a video

Question

I teach an online course and I need to make sure that my students really watch a specific video. Now I understand that everything can be defeated, but what I'm looking for is the 80/20 rule, I can do some tricks to begin the path of responsibility for my students.

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

Q2: Is there a way to fire an event when a video ends?

Q3: Is there a way to make sure that the video was played in full, and not the student, by clicking on the end of the timeline?

I have to say (again), please do not answer these questions with something like "you are wasting your time, students will defeat everything you do."

Answer 1

Which player are you using. If you are using open source video players such as JWPlayer or Flow Player. You can track events. I personally prefer the stream player, and you can use google analytics to track the duration and any other task you want on the page.

since you have an authentication mechanism on the page, you can get the student’s username (or identifier). Click events to analyze Google with this as a shortcut, and you can keep track of everything the student does, including the links he clicked, playing time, when he played ...

• you can set up google analyttic http://www.google.lk/analytics/ for free :)
• Event Tracking Guide https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
• Player Events http://flash.flowplayer.org/documentation/events/player.html

setup example

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

Track

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

this is part of the real-time code that I took from http://vsp.ideawide.com/ in which I track some of these 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 setup with the right player, you can upgrade your 80/20 to 99/1.

Answer 2

Problems with the initial approach

I teach an online course and I need to make sure that my students really watch a specific video.

Here is the problem. Your requirement is that the students actually watch the video, but the best thing we can do programmatically is to make sure that the video was sent by the server and received by the client. In addition to using extreme measures, such as face recognition and a loop of audio, you cannot be sure that someone is watching him or that the intended audience is watching him or that someone is listening. A student can simply start the video and leave.

It may sound like technicality, but it’s actually an important difference. What you have is equivalent to a system designed for someone to read a book, but all the system can do is check if the book is open or closed at any given time.

Security

Now I understand that everything can be defeated, but what I am looking for is the 80/20 rule, I can make several adjustments to begin the path of responsibility to my students.

Everything can be defeated with sufficient effort, but the proposed solution can be defeated with almost no effort. If it’s easier for your average user to trick the system than to use it legally, it probably shouldn't be implemented.

Alternative approach

Instead of focusing on whether the browser is running as a video, consider switching focus back to the user. By requiring some user interaction during the video display, you can have a much higher level of confidence in the system.

The easiest way to do this is to split the video into several small parts, displaying a link to the next video after each of them.

Then you can write a small script to display the time between requests for this series of videos (for each user) and mark any requests that were too far apart or too close to each other, given the length of the segments (or comparing to the average if this data is not available for any reason). You can pull this data directly from the server logs if you have access to it, or you can record it yourself.

Comprehension

If you want to go the extra step and experience understanding (or retention), this alternative approach will be simple. Instead of having one link to the next video, you have several links to it, in the form of answers to the question. If you are worried about students sharing answers, don’t tell them if they understood it correctly, just send them to the next video. You can look at this data later and decide if you want to use it and how you want to twist it.

Answer 3

This assumes HTML5 video using a 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 a control attribute to disable the search bar. Then you can start the game by click using the following:

 player.play(); 

Answer 4

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

Try this to determine when a window loses focus:

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

If you really care about the accuracy of setTimeout, 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: find the onblur event

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

Q3: I would try to find a flash player that has all of these options, but my solution is more like javascript. 3 /

Hope this helps you!

Answer 6

• handle window.onblur as mentioned
• you will get the fire “completed” when the video is completed.
• you can call mediaElement.played.end () to get the number of seconds played in the browser.

Look here and here