JavaScript - Prevent default in html5 video tag while fullscreen

问题

I have a video player on my website and want to change the default seek time when a user clicks left or right arrows to 10 seconds (like netflix or youtube).

Using a combination of preventDefault() and stopImmediatePropagation() I've managed to achieve desired effect however when a user goes fullscreen, default events are still passed through (along with my code).

    document.onkeydown = function(event) {
    switch (event.keyCode) {
        case 37:
            event.preventDefault();
            event.stopImmediatePropagation();
            vid.currentTime = vid.currentTime - 10;
        break;
        case 39:
            event.preventDefault();
            event.stopImmediatePropagation();
            vid.currentTime = vid.currentTime + 10;
        break;
    }
}

I've read on other posts that blocking escape to leave full screen isn't permitted by most browsers because its intrusive, however this is only affecting the left and right arrows, any way to change the default seek time?

Tested on Chrome.

回答1:

For now I created a little hack to get around it, have a variable update every 200ms with the current video time, and when left/right key is pressed adjust the time based off that variable instead of the true video time. My reasoning is that since my code is called after the default browser action, this variable will contain the video time before the browser changed it.

// Variable to hold the current video time +- 200ms
var curTime;
var vid = document.getElementById("movie-player");

//Update video time variable every 200ms
window.setInterval(function(){
    curTime = document.getElementById("movie-player").currentTime;
}, 200);

//On Keypress Handler
document.onkeydown = function(event) {
    switch (event.keyCode) {

        case 37:
            // Calculate the new time (old - 10s)
            var newTime = curTime - 10;
            // Update video time variable with the adjusted time
            curTime = newTime;
            // Finally set the video time with the correct one.
            vid.currentTime = newTime;
        break;

        case 39:
            // Calculate the new time (old + 10s)
            var newTime = curTime + 10;
            // Update video time variable with the adjusted time
            curTime = newTime;
            // Finally set the video time with the correct one.
            vid.currentTime = newTime;
        break;
    }
};

Again, I think this is very hackish but it works, the only concern I might have is the occasional time when the curTime updates after the default browser action but before the video time is updated correctly.

If someone has a better solution please post it and Ill mark it as the correct solution.

Tested on Chrome.

来源：https://stackoverflow.com/questions/57910656/javascript-prevent-default-in-html5-video-tag-while-fullscreen

标签

javascript

fullscreen

preventdefault