I’m trying to build a small video-viewer (mainly just for myself), it’s fairly easy to use the video-tag. The problem is when I want to have my own events to control the video. With the keydown-event on ArrowRight and ArrowLeft moves 5 seconds back or forth, but when I press the key, the video skips before the event has triggered.

        <div id="player-section">
            <video width="100%" height="auto" >
                <source src="/video/videofile.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="details">
                <!-- Some metadata -->
            </div>
        </div>

    const video = document.querySelector('video');
    video.addEventListener('keydown', e => {
        e.preventDefault();
        switch (e.key) {
            case 'ArrowRight':
                video.currentTime += 5;
                break;
            case 'ArrowLeft':
                video.currentTime -= 5;
                break;
        }
    });

I’ve set a checkpoint on the e.preventDefault(), and when the code pauses at the checkpoint, the video has already moved through the default function of the video-tag, then it steps through my code, and moves it further.
I’ve tried to see if I can apprehend the move by preventing default in the seeking-event, but the same thing happens there. I tried seeked-event too, but that’s not supposed to trigger until after the move anyway.
I’ve tried it in Thorium, Brave and Chrome, but still the same.
What am I missing?