如何获取HTML5视频中寻找事件的起点？

Question

我发现在 HTML5 视频中，当用户通过单击控件执行搜索操作时，无法获取搜索前的时间。

我想做的是，每当用户搜索视频到某个点时，系统会在用户搜索之前准确地知道是在什么点。例如，如果用户正在观看视频直到 2:00，然后在 4:00 单击控件，我们需要跟踪时间 2:00。我试过搜索和搜索事件，但无法获取时间 2:00。它总是 return 我的时间 4:00。有什么解决办法吗？

Answer 1

多亏了 timeupdate 事件，您应该能够追踪到这一点，但会有短暂的延迟：

var video = document.querySelector('video');
video.BP = 0;

video.addEventListener('timeupdate', function(e){
var that = this;
(function(){
 setTimeout(function(){
   that.BP=that.currentTime;
   }, 500);
  }).call(that);}
  );

video.addEventListener('seeking', function(e){
  log('boringPart = '+this.BP+
        " gone to "+this.currentTime)
  })
function log(txt){document.querySelector('p').innerHTML = txt;}

<video controls="true" autoplay="true" height="200" width="600"><source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv"><source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"></video>
<p style="position:absolute; top: 0.5em;left: 3em; color: #FFF;background:#000"></p>

Answer 2

使用点击事件来跟踪导致搜索事件的点击。使用 video.js

的示例

var clickTime = 0;
this.controlBar.on('click', function(){
    clickTime = player.currentTime();
});

this.on('seeking', function(){
    seekTime = clickTime;
    //do stuff
});

如何获取HTML5视频中寻找事件的起点？

How to get the starting point of a seeking event in HTML5 Video?

html

javascript

video