HTML5 Video: get seek-from position

Question

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 listen to the seeked event), I am unable to figure how to get the first.

In the past, I've used custom controls, so I could save currentTime just before manually changing it to perform the seek, when listening to the mousedown event of the progress bar or whatever I had rendered.

Now, I wanted to do it with the standard controls, but I am unable to capture this last played position.

I even tried to listen the mousedown event on the video element, but it only fires when selecting outside the control area...

let video = document.getElementsByTagName('video')[0];
let list = document.getElementsByTagName('ul')[0];


function log(name, time) {
  let li = document.createElement('li');
  li.textContent = name + ': ' + time;
  list.appendChild(li);
}

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

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

<video width="300" src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" controls></video>
<ul>
</ul>

Thank you!

Answer 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;
});

Answer 2

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;
});

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.