Html5 Video: Get Seek-from Position

I want to keep track of the seeks performed in an HTML5 video. For this, I need to know the seek-from and seek-to positions. While getting the second is trivial (one only has to li

Solution 1:

You could use thetimeupdate event to keep track of current time, then when a seeked event occurs you know the last known current time.

Only problem here is that at least Chrome triggers an timeupdate just before triggering seeked what would break this approach. But then we can use seeking event to know when it should stop keeping track of current time.

The only downside of this is that if user do multiples seeks to points where video has not loaded yet you'll just get the first seek start position.

let currentVideoTime = 0;
let saveCurrentTime = true;

video.addEventListener('seeked', e => {
  log('seeked (started at ' + currentVideoTime + ')', e.target.currentTime);
  saveCurrentTime = true;
});

video.addEventListener('seeking', e => {
  log('seeking', e.target.currentTime);
  saveCurrentTime = false;
});

video.addEventListener('timeupdate', e => {
  log('timeupdate', e.target.currentTime);
  if(saveCurrentTime)
    currentVideoTime = e.target.currentTime;
});

Solution 2:

so I have been facing this problem myself, and I was able to make it work using the following trick:

var timing = 0;    
video.addEventListener('timeupdate', function () {
    var previousTime = timing;
    var currentTime = Math.round(this.currentTime);
    if (currentTime > previousTime + 1 || currentTime < previousTime - 1) {
        console.log('Video ' + this.id + ' was skipped from ' + previousTime + ' to ' + currentTime + ' sec.');
    }
    timing = currentTime;
});

So using the timeupdate event, I check for a difference of more than 1 second between the previousTime and the currentTime". Tested on Chrome, FF and Safari with success.

Solution 3:

My problem is that seeking even, when it's fired, video_element.currentTime is already the updated "seek to" time.

The way I do it is basically by tracking only timeupdate (except that timeupdate doesn't fire often enough [sometimes 20s? sometimes 1ms? maybe depends on load?] so I just set a timer for 100 fps and poll the currentTime. If it has changed "significantly" since last time, I assume a seek. FWIW.

It does seem that timeupdate "sometimes" fires before the seeking event does (bummer). Might make a difference whether it's forward vs. backward seek or some odd.

Solution 4:

Take a look to video played property.

To get the seek-from position i'm using next code

const vid = document.getElementById("video1");
vid.onseeking = function() {
    let seekStartTime = 0;
    if (vid.played.length >= 1) {
      seekStartTime = vid.played.end(vid.played.length - 1);
    }
    document.getElementById('videoSeekedFrom').innerHTML = "Video seeked from - " + seekStartTime + " seconds";
};
vid.onseeked = function() {
    let seekEndTime = vid.currentTime;
    document.getElementById('videoSeekedTo').innerHTML = "Video seeked to - " + seekEndTime + " seconds";
};