How do I override HTML Video Controls?

Question

By default, the left and right arrow move the time of the video by 0.01*video duration. So, for a 14400 seconds video, a right arrow press would move the time 144 seconds forward. I want the left and right arrows to move the video by 5 second increments instead.

Here is my code to try to override the left and right arrows, but it doesn't seem to be working as intended. It simply changes the 144 second leap forward to a 149 second leap forward.

vid.onkeydown = function (event) {
        let preventDefault = true;
        switch (event.code) {
            case "ArrowLeft": // left
                event.preventDefault();
                vid_currentTime = vid.currentTime;
                vid.currentTime = vid_currentTime -5;
                break;

            case "ArrowRight": // right
                event.preventDefault();
                vid_currentTime = vid.currentTime;
                vid.currentTime = vid_currentTime +5;
                break;
        }
        if (preventDefault) {
            event.preventDefault();
        }
    };

score 0 · Answer 1 · answered Oct 17 '22 at 14:38

It looks like what is happening here is that your 5 second is being added to (or subtracted from) the default 144c seconds.

Without seeing the complete code it's hard to be certain, but this is most likely because 'preventDefault' is not stopping the onkeydown event from being passed up the DOM tree, as you might expect, so the actions are bing combined.

There is some good background in this question - it is worth reading through all the top answers: What's the difference between event.stopPropagation and event.preventDefault?

I suspect you want to add 'event.stopPropogration' to your code.

How do I override HTML Video Controls?

1 Answers1