javascript - HTML5 Video: get seek-from position - Stack Overflow

admin管理员组

文章数量:1405636

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=".mp4" controls></video>
<ul>
</ul>

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/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" controls></video>
<ul>
</ul>

Thank you!

• javascript
• html
• html5-video

Share Improve this question Follow edited Dec 15, 2017 at 12:46 cristiancajiaos 96611 gold badge88 silver badges1616 bronze badges asked Jun 9, 2017 at 12:19 nerestarennerestaren 16622 silver badges1313 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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.

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.

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

本文标签： javascriptHTML5 Video get seekfrom positionStack Overflow