Video.focus() só funciona se o atributo 'controls' estiver ativo

Front-end JavaScript
, ,
#1

Bom dia pessoal, estou tendo uma dificuldade com javascript que não encontrei a solução pesquisando no google, e gostaria de ter o conhecimento sobre como fazer:

Estou criando atalhos personalizados para um video que esteja dentro de uma certa div, os eventos esão sendo disparados, o problema é:

  1. quando o atributo controls está ativo, e eu pressiono por exemplo shift + ‘–>’ (que deveria avançar o video em 3 segundos), o player avança os 3 segundos como no código, e mais os 14 segundos do atalho padrão (tecla ‘–>’). ou seja, avança 17 segundos

obs.: tentei usar o event.preventDefault() para não disparar o evento padrão dos 14 segundos(sem sucesso)

  1. quando o atributo controls está desativado, o elemento video simplesmente não recebe foco, nem mesmo usando video.focus(), me impossibilitando de usar os atalhos, pois o foco está no body

o servidor está rodando em um pc conectado à rede local que uso somente como servidor.

RESUMO: com o controls eu consigo usar os atalhos, mas o tempo fica incorreto, sem o controls o tempo fica perfeito(testei atribuindo o evento ao body) porém não consigo atribuir ao video, pois o video nunca recebe o focus()

seguem os códigos:

arquivo.php (se precisarem ver o arquivo completo é só falar):

<div id="current_episode">
        <video id="vd" width="1280" height="720">
            <source src="<?php echo $video_file ?>">
        </video>
        現在: <?php echo $current_ep; ?>
</div>

arquivo.js:

var vd = document.getElementById('vd');
window.onload = function() {
   vd.focus();

   if(document.activeElement == vd) {
       console.log('activeElement: #vd');
   } else {
       logActive();
   }
}

vd.addEventListener('click', function() {
   vd.focus();
   logActive();
});


//###############> Atalhos VLC-like <###############\\

//3s
vd.addEventListener('keydown', function(e) {
   if(e.shiftKey && e.keyCode == 37) {
       vd.currentTime -= 3;
       e.preventDefault();
       logActive();
   }
});


vd.addEventListener('keydown', function(e) {
   if(e.shiftKey && e.keyCode == 39) {
       vd.currentTime += 3;
       e.preventDefault();
       logActive();
   }
});

//10s
vd.addEventListener('keydown', function(e) {
   if(e.keyCode == 37 && !e.ctrlKey && !e.shiftKey) {
       vd.currentTime -= 10;
       e.preventDefault();
       logActive();
   }
});


vd.addEventListener('keydown', function(e) {
   if(e.keyCode == 39 && !e.ctrlKey && !e.shiftKey) {
       vd.currentTime += 10;
       e.preventDefault();
       logActive();
   }
});

//60s
vd.addEventListener('keydown', function(e) {
   if(e.ctrlKey && e.keyCode == 37) {
       vd.currentTime -= 60;
       e.preventDefault();
       logActive();
   }
});


vd.addEventListener('keydown', function(e) {
   if(e.ctrlKey && e.keyCode == 39) {
       vd.currentTime += 60;
       e.preventDefault();
       logActive();
   }
});

//Play/Pause
vd.addEventListener('keydown', function(e) {
   if(e.spaceKey) {
       //e.preventDefault();
      if(vd.paused) {
          vd.play();
      } else {
          vd.pause();
      }
      logActive();
   }
   
});

function logActive() {
   console.log('activeElement -> '+ document.activeElement);
}

Desde já agradeço a ajuda de todos