Video.js: What is the correct way to adjust seeking position on seeking?

Created on 2 Feb 2018  路  6Comments  路  Source: videojs/video.js

I show thumbnails over the scrubber and I want the video to scroll exactly into the thumb position.
Say currently visible thumb covers 00:01:00 to 00:01:10. The user clicks at 00:01:05 and I want to seek the video into 00:01:00.

It looks like such code goes into infinite loop (I guess currentTime(t) fires seeking event)

// ccue is set above on picking the thumb to show.

player.on('seeking', function (ev) {
    player.currentTime(ccue.startTime);
});

It works such dirty way but it is definitely dirty

// ccue is set above on picking the thumb to show.

var kappa = 1;
player.on('seeking', function( ev){
    if (kappa > 0) {
        player.currentTime(ccue.startTime);
        kappa = 0;
    } else {
        kappa = 1;
    }
});

Most helpful comment

Further, the seeking and seeked events are not terribly reliable and fire _a lot_, especially during scrubbing. You'll want to check the state of scrubbing() and seeking() as well.

All 6 comments

This may not be the exact behavior you want, but you could try listening to the seeked event instead. This is fired after the player has finished to a location, so where the user initially clicked(00:01:05).

Another way would be to use one() instead of on() if you are listening to clicks on your thumbnails. This listener will fire once and will be less likely to turn into an infinite loop.

Probably the best way would be to use middleware to change the value passed to setCurrentTime on the Tech before the seek even happens.

@ldayananda Thanks! I guess middlewared setCurrentTime() is absolutely the best way to go.

Further, the seeking and seeked events are not terribly reliable and fire _a lot_, especially during scrubbing. You'll want to check the state of scrubbing() and seeking() as well.

I think using middleware is the best course of action for this use-case.

@dandelionred let us know how it works if you use it!

Thanks, it works perfectly with middleware!

The doc page http://docs.videojs.com/tutorial-middleware.html is slightly confusing. Since setSource() is a must the doc should say about it at the very top, not by the very bottom.

Thanks @dandelionred. @ldayananda is working on updating the docs over here, want to take a look?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

TheKassaK picture TheKassaK  路  3Comments

dingyaguang117 picture dingyaguang117  路  4Comments

stephanedemotte picture stephanedemotte  路  4Comments

d3x7r0 picture d3x7r0  路  4Comments

zhulduz picture zhulduz  路  3Comments