HTML5视频:获得搜索位置 [英] HTML5 Video: get seek-from position

问题描述

我想跟踪在HTML5视频中执行的搜索.为此，我需要知道从搜索和从搜索的位置.虽然获得第二个是微不足道的(一个人仅需监听seeked事件)，但我无法弄清楚如何获得第一个.

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

现在，我想使用标准控件来做到这一点，但是我无法捕捉到上次播放的位置.

我什至试图监听video元素上的mousedown事件，但仅在选择外部控制区域时才会触发...

 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> 

谢谢！

解决方案

您可以使用timeupdate事件来跟踪当前时间，然后在发生seeked事件时，您可以知道最近的当前时间.

这里唯一的问题是，至少在触发seeked之前，Chrome浏览器会触发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;
});

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!

解决方案

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

这篇关于HTML5视频:获得搜索位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！