Question

我想跟踪在HTML5视频中执行的搜索。为此，我需要知道 seek-from 和 seek-to 位置。虽然获得第二个是微不足道的（只需要听seeked事件），但我无法确定如何获得第一个。

过去，我使用过自定义控件，因此在听取currentTime事件时，我可以在手动更改它以执行搜索之前保存mousedown进度条或我提供的任何内容。

现在，我想用标准控件来做，但我无法捕捉到最后一次播放的位置。

我甚至试图在mousedown元素上收听video事件，但只有在外控制区域时才会触发...

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>

谢谢！

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

我的问题是seeking甚至，当它被解雇时，video_element.currentTime已经更新了＆＃34;寻找＆＃34;时间。

我这样做的方法基本上只是跟踪timeupdate（除了timeupdate不经常发射[有时20秒？有时1毫秒？可能取决于负载？]所以我只是设置一个timer为100 fps并轮询currentTime。如果它已经发生变化＆＃34;显着＆＃34;自上次以来，我假设一个搜索.FWIW。

似乎timeupdate＆＃34;有时＆＃34;在seeking事件发生之前触发（无赖）。无论是前向还是向后寻求还是有些奇怪，都可能会有所作为。

Answer 3

所以我本人就一直面对这个问题，并且可以使用以下技巧使其起作用：

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

因此，使用timeupdate事件，我检查了先前时间与当前时间之间的差异是否超过1秒。”在Chrome，FF和Safari上进行了成功测试。

Answer 4

看看视频的played属性。

要使用下一个代码获取搜索位置

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

HTML5视频：获取搜索位置

4 个答案: