How do I detect when my user is watching a video (from an external source as well)

Question

I'm looking to implement a point system like the one on Khan Academy, and I don't know how to detect when my user is watching a video.

I'm using jQuery & ASP.NET. The videos are not hosted on my server and come from various sources.

Answer 1

with media like video and other things, typically the player itself has built-in callback functionality that allows you to fire an event at the beginning and/or end of playback. and if you're using an HTML5 video player, you'll have even more exposure to javascript. whats good about having a versatile player with callback support is that it doesn't matter where the media file is hosted, it just matters what events are occurring in the player itself.

if you were to do it that way, you could fire a javascript function upon start of video that records an event that user's video has started, track this as "currently watching" and then upon completion, similarly, mark it as a fully watched video

now, while the video is being watched, you'd want to use javascript to detect page focus loss... as in, did they tab away, or go to a different window on their computer. etc. (<-- google those types of questions: JavaScript / jQuery: Test if window has focus)

Answer 2

The free Video.js project allows you to use Javascript to programmatically control and interact with videos playing on your page, regardless of whether they're hosted HTML5, Flash or YouTube videos.

You can add a listener for the JavaScript event named "timeupdate", which will fire each 15-250 milliseconds while the video is playing.