javascript - 如何允许倒带但禁用 html5-video 中的快进

Question

我有以下代码(使用videojs)

this.on("timeupdate", function(event) {
            previousTime = this.currentTime();
        });

        this.on("seeking", function(){
            if (this.currentTime() > previousTime){
                this.currentTime = previousTime;
            }
        });

问题是，一旦您尝试快进一次，它就不再跟踪进度条上的时间更新。我不能再在酒吧里寻找——甚至不能倒带视频。我在这里缺少什么？

Answer 1

首先，这些不是标准的 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 的工作示例的链接:

http://jsbin.com/kilemoto/1/edit