如何在HTML5视频中获得搜索事件的起点?

问题描述 投票:2回答:2

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

我想做的是每当用户在某个点上寻找视频时,系统就会确切知道用​​户在寻找之前的哪一点。例如,如果用户正在观看视频直到2:00然后在4:00点击控件,我们需要跟踪时间2:00。我试过寻找和寻找事件,但无法得到时间2点。它总是在4:00返回我的时间。有什么解决方案吗?

javascript html5 video
2个回答
0
投票

你应该能够通过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>

1
投票

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

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

this.on('seeking', function(){
    seekTime = clickTime;
    //do stuff
});
© www.soinside.com 2019 - 2024. All rights reserved.