Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

video.js - find the start time of a seek during playback

I am using video.js (http://www.videojs.com/) to build a video approval system and need to log user actions in the player. I can do this easily enough with play, pause, end etc. but have hit a problem when trying to log seeks.

I want to be able to log the start and end times of any seeks within the plaback, so we know if the user has not actually watched a section of the video. The player seems to offer events to support this, but I am struggling to get correct timings from it.

When the user skips through a video the player emits the following events in order: pause, seeking, seeked, play.

If I query the player object at any of these events using currentTime() the result is always the end time for the seek, even on the initial pause event. This means I can log where the seek ended but not where it started.

Can anyone help me to find the position in the video where the seek begins?

If this is not possible, I'd settle for a way to disable seeking during playback.

EDIT: adding code as requested. It's pretty simple:

var trackedPlayer = videojs('pvp-player');

trackedPlayer.on("play", function (e) {
    console.log("Video playback started: " + trackedPlayer.currentTime());
});

trackedPlayer.on("pause", function (e) {
    console.log("Video playback paused: " + trackedPlayer.currentTime());
});

trackedPlayer.on("seeking", function (e) {
    console.log("Video seeking: " + trackedPlayer.currentTime());
});


trackedPlayer.on("seeked", function (e) {
    console.log("Video seek ended: " + trackedPlayer.currentTime());
});

trackedPlayer.on("ended", function (e) {
    console.log("Video playback ended.");
});

If I can get all the tracking I want I will replace console.log with ajax calls to store the data.

like image 540
Dave The Butcher Avatar asked Apr 20 '15 09:04

Dave The Butcher


1 Answers

You can listen to timeupdate und take the next to last value you got there before seeking is called as your source:

var previousTime = 0;
var currentTime = 0;
trackedPlayer.on('timeupdate', function() {
    previousTime = currentTime;
    currentTime = trackedPlayer.currentTime();
});
trackedPlayer.on('seeking', function() {
    console.log('seeking from', previousTime, 'to', currentTime, '; delta:', currentTime - previousTime);
});

This seems to work with the HTML5 tech. I have not tested with other techs.

There is, however, one glitch: the first time seeking a paused player yields only a small delta (and the almost-same previous value for both variables). But this shouldn’t matter much since the delta is only a few hundred milliseconds (and I gather you’re only interested in the “from” value).

Update

seeked is triggered far more infrequently than seeking. Try the following.

var previousTime = 0;
var currentTime = 0;
var seekStart = null;
trackedPlayer.on('timeupdate', function() {
    previousTime = currentTime;
    currentTime = trackedPlayer.currentTime();
});
trackedPlayer.on('seeking', function() {
    if(seekStart === null) {
        seekStart = previousTime;
    }
});
trackedPlayer.on('seeked', function() {
    console.log('seeked from', seekStart, 'to', currentTime, '; delta:', currentTime - previousTime);
    seekStart = null;
});

There are also many libraries for debouncing function calls (in this case the call to your backend).

like image 60
Raphael Schweikert Avatar answered Dec 13 '22 04:12

Raphael Schweikert