使用 Youtube iframe API 时处理关键事件

Question

我正在寻找一种解决方案，了解如何在使用 Youtube iframe API 在我的应用程序上运行 Youtube 视频时处理关键事件。不幸的是找不到任何东西。确实浏览了此文档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 
          }
        });
      }

有什么方法可以在按下箭头键时专门处理按键事件？

PS：我不知道我在这里可能错了，但通常当我在视频缓冲时按箭头键时，我看到点链移动，这给了我一个提示，即播放器确实检测到这些事件并做出响应。

更新问题

正如下面的答案所暗示的，这在某种程度上是一种解决方案，但由于 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 是一个完全独立的窗口，因此您的关键事件将不会被监听。为了解决这个问题，您可以在 YouTube iframe 上覆盖一个透明 div 并构建您自己的播放/暂停按钮。这样一来，任何人都不会单击 iframe 并失去父窗口的焦点。

我希望这会有所帮助！