CODEWITHSUNDEEP
javascripthtml5-video
Hill
Hill

Reputation: 429

How to allow rewind but disable fast-forwarding in html5-video

I have the following code (using videojs)

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

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

Problem is that, once you try to fast-forward one time, it no longers keeps track of the timeupdate on the progress bar. I can not longer seek on the bar - not even rewind the video. What am I missing here?

Upvotes: 2

Views: 10461

Answers (2)

Robert Hoffmann
Robert Hoffmann

Reputation: 2416

Just had to implement this, seems to be working nicely

var elem = document.querySelector("video");
let previousTime = 0;

elem.ontimeupdate = function() {
  setTimeout(() => {
    previousTime = elem.currentTime;
  }, 1000)
}

elem.onseeking = function() {
  if (elem.currentTime > previousTime) {
      elem.currentTime = previousTime;
  }
}

Upvotes: 2

brianchirls
brianchirls

Reputation: 7853

First off, these are not standard HTMLMediaElement methods and properties, so I'm assuming you're using some kind of framework, perhaps Popcorn.js? And I'm assuming this refers to the object wrapping your video element.

The problem is that you're overwriting the currentTime method. If you were to reference the video element directly, then you would seek the way you're doing it, by setting the currentTime property, like: videoElement.currentTime = previousTime. But since you're using the framework, this.currentTime is supposed to be a function until you change it to a number.

To demonstrate, modify your code as follows:

this.on("seeking", function(){
    console.log(typeof this.currentTime); // 'function'
    if (this.currentTime() > previousTime){
        this.currentTime = previousTime;
        console.log(typeof this.currentTime); // 'number'
    }
});

The next time you run the "timeupdate" handler, the call to this.currentTime() will throw an error because it is no longer a function.

You can probably fix it like this (assuming you're using Popcorn or something that works similarly):

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

You'll also want to make sure that you don't set previousTime while seeking, since "timeupdate" may fire before "seeking" does. I'm not sure how to do that with your framework, so here's a link to a working example using the native HTMLVideoElement API:

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

Upvotes: 8

Related Questions