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

Question

我有以下代码（使用videojs）

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

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

问题是，一旦尝试快进一次，它就不再在进度条上跟踪timeupdate。我再也找不到酒吧了，甚至无法倒带视频。我在这里想念什么？

Answer 1

首先，这些不是标准的HTMLMediaElement方法和属性，因此我假设您使用的是某种框架，也许是Popcorn.js？我假设this是指包装您的视频元素的对象。

问题在于您正在覆盖该currentTime方法。如果您要直接引用video元素，则可以通过设置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()将引发错误，因为它不再是函数。

您可能可以这样解决（假设您使用的是爆米花或类似的东西）：

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

您还需要确保previousTime在搜索时未设置，因为“ timeupdate”可能会在“搜索”之前触发。我不确定如何使用您的框架，因此下面是使用本地HTMLVideoElement API的工作示例的链接：

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