我发现在HTML5视频中,当用户通过单击控件执行搜索操作时,在搜索之前无法获得时间。
我想做的是每当用户在某个点上寻找视频时,系统就会确切知道用户在寻找之前的哪一点。例如,如果用户正在观看视频直到2:00然后在4:00点击控件,我们需要跟踪时间2:00。我试过寻找和寻找事件,但无法得到时间2点。它总是在4:00返回我的时间。有什么解决方案吗?
你应该能够通过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>
使用点击事件来跟踪导致搜索事件的点击。使用video.js的示例
var clickTime = 0;
this.controlBar.on('click', function(){
clickTime = player.currentTime();
});
this.on('seeking', function(){
seekTime = clickTime;
//do stuff
});