javascript - HTML5 视频 : get seek-from position

Question

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

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

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

我什至尝试在 video 元素上监听 mousedown 事件，但它仅在选择 outside 控制区域时触发...

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

您可以使用 timeupdate 事件来跟踪当前时间，然后当 seeked 事件发生时，您就知道最后一个已知的当前时间。

这里唯一的问题是，至少 Chrome 会在触发 seeked 之前触发 timeupdate，这会破坏这种方法。但是我们可以使用 seeking 事件来知道什么时候应该停止跟踪当前时间。

唯一的缺点是，如果用户多次搜索到视频尚未加载的点，您只会获得第一个搜索开始位置。

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