我有以下代码(使用videojs)
this.on("timeupdate", function(event) {
previousTime = this.currentTime();
});
this.on("seeking", function(){
if (this.currentTime() > previousTime){
this.currentTime = previousTime;
}
});
问题是,一旦您尝试快进一次,它就不再跟踪进度条上的时间更新。我不能再在酒吧里寻找——甚至不能倒带视频。我在这里缺少什么?
最佳答案
首先,这些不是标准的 HTMLMediaElement 方法和属性,所以我假设您正在使用某种框架,可能是 Popcorn.js ?我假设 this
指的是包装视频元素的对象。
问题是您正在覆盖 currentTime
方法。如果您要直接引用视频元素,那么您将通过设置 currentTime
属性来寻求您的做法,例如:videoElement.currentTime = previousTime
。但是由于您使用的是框架,所以在您将其更改为数字之前,this.currentTime
应该是一个函数。
为了演示,修改您的代码如下:
this.on("seeking", function(){
console.log(typeof this.currentTime); // 'function'
if (this.currentTime() > previousTime){
this.currentTime = previousTime;
console.log(typeof this.currentTime); // 'number'
}
});
下次运行“timeupdate”处理程序时,对 this.currentTime()
的调用将引发错误,因为它不再是一个函数。
您可能可以像这样修复它(假设您使用的是 Popcorn 或类似的东西):
this.on("seeking", function(){
if (this.currentTime() > previousTime){
this.currentTime(previousTime);
}
});
您还需要确保在搜索时不要设置 previousTime
,因为“timeupdate”可能会在“seeking”之前触发。我不确定如何使用您的框架执行此操作,因此这里有一个指向使用 native HTMLVideoElement API 的工作示例的链接:
关于javascript - 如何允许倒带但禁用 html5-video 中的快进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24461613/