Управление ключевыми событиями при использовании Youtube iframe API

Question

Я искал решение о том, как обрабатывать ключевые события при запуске видео Youtube в моем приложении с использованием Youtube iframe API. к сожалению, не удалось найти. Прошел эту документацию https://developers.google.com/youtube/iframe_api_reference#Events, но, похоже, игрок не запускает какое-либо событие, связанное с ключом (например: onkeydown, keypress, keyup).

Я попытался добавить события непосредственно к предоставленному коду, но он не сработал.

var tag = document.createElement('script'); 

     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // 3. This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('trailer_video', { 
      height: '390', 
      width: '640', 
      videoId: 'M7lc1UVf-VE', 
      events: { 
      // 'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange, 
      'onkeydown': myfunction // custom event 
      } 
     }); 
     } 

Есть ли способ обработать ключевые события, особенно при нажатии клавиш со стрелками.

P.S: Я не знаю, что, возможно, я ошибаюсь здесь, но обычно, когда я нажимаю клавиши со стрелками во время буферизации видео, я вижу цепочку точек, которые дают мне подсказку, что игрок действительно обнаруживает эти события и отвечает.

UPDATE ВОПРОС

Как ниже ответ предполагает, что конечно решение в пути, но так как Youtube также обрабатывает стрелки влево и вправо ключевые события его можно использовать, когда курсор находится над видео, а также, моя забота, как я могу обрабатывать события для клавиш со стрелками вверх и вниз, которые не обрабатываются Youtube и которые работают только тогда, когда курсор не находится над видео, если я реализую специальный обработчик событий.

Answer 1

Это зависит от того, чего вы пытаетесь достичь. Но ответ на ваш вопрос, «Есть ли способ обработать ключевые события, особенно когда клавиши со стрелками нажаты?» - да. Вот пример пользовательской обратной перемотки/быстрой перемотки вперед функциональности, которая использует левую и правую клавиши со стрелками:

https://jsfiddle.net/xoewzhcy/3/

<div id="video"></div> 

function embedYouTubeVideo() { 
    player = new YT.Player('video', { 
     videoId: 'M7lc1UVf-VE' 
    }); 
} 

function rewind() { 
    var currentTime = player.getCurrentTime(); 
    player.seekTo(currentTime - 30, true); 
    player.playVideo(); 
} 

function fastforward() { 
    var currentTime = player.getCurrentTime(); 
    player.seekTo(currentTime + 30, true); 
    player.playVideo(); 
} 

$(function(){ 

    // embed the video 
    embedYouTubeVideo(); 

    // bind events to the arrow keys 
    $(document).keydown(function(e) { 
     switch(e.which) { 
      case 37: // left (rewind) 
       rewind(); 
      break; 
      case 39: // right (fast-forward) 
       fastforward(); 
      break; 
      default: return; // exit this handler for other keys 
     } 
     e.preventDefault(); // prevent the default action (scroll/move caret) 
    }); 
}); 

Примечание: Берегитесь, когда вы сосредоточены на встроенном видео (т. е. вы нажмете кнопку воспроизведения YouTube или нажмете на YouTube iframe любым способом). Потому что ваши ключевые события не будут прослушиваться, так как YouTube iframe является полностью отдельным окном. Чтобы обойти это, вы можете наложить прозрачный div на YouTube iframe и создать свои собственные кнопки воспроизведения/паузы. Таким образом, никто не может щелкнуть в iframe и потерять фокус родительского окна.

Надеюсь, это поможет!