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

我正在寻找一种解决方案，解决在我的应用程序上使用Youtube iframe API运行Youtube视频时如何处理关键事件的问题。不幸的是，我找不到。我看过了这个文档，但看起来玩家并没有触发任何与按键相关的事件（例如：onkeydown，keypress，keypup）

我尝试将事件直接添加到提供的代码中，但没有成功

 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 
          }
        });
      }

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
// 3. 此函数用于创建（和YouTube播放器）
//API代码下载后。
var播放器；
函数onyoutubeiframeapiredy（）{
播放器=新的YT.player（'预告片\视频'{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'，
活动：{
//“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange，
“onkeydown”：myfunction//自定义事件
}
});
}

有什么方法可以特别在按下箭头键时处理按键事件吗

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

更新问题

---

下面的答案表明，这在某种程度上当然是一个解决方案，但由于Youtube也处理左右箭头键事件，所以当光标位于视频上方时，可能会使用它，我担心的是，如何处理Youtube无法处理的向上和向下箭头键的事件，如果我实现自定义事件处理程序，则仅当光标不在视频上时才有效。

这取决于您试图完成的任务。但你的问题的答案是“有没有什么方法可以特别在按下箭头键时处理按键事件？”是的。以下是使用左右箭头键的自定义回放/快进功能的示例：

函数embeddeyoutubevideo（）{
播放器=新的YT.player（'视频'{
videoId:'M7lc1UVf VE'
});
}
函数倒带（）{
var currentTime=player.getCurrentTime（）；
player.seekTo（当前时间-30，真）；
player.playVideo（）；
}
函数快进（）{
var currentTime=player.getCurrentTime（）；
player.seekTo（当前时间+30，真）；
player.playVideo（）；
}
$（函数（）{
//嵌入视频
embeddeyoutubevideo（）；
//将事件绑定到箭头键
$（文档）.keydown（函数（e）{
开关（e.which）{
案例37://左（倒带）
倒带（）；
打破
案例39://右侧（快进）
快进（）；
打破
默认值：return；//退出其他键的处理程序
}
e、 preventDefault（）；//防止默认操作（滚动/移动插入符号）
});
});

注意：关注嵌入视频时要小心（即，您单击YouTube播放按钮或以任何方式单击YouTube iframe）。因为，YouTube iframe是一个完全独立的窗口，所以不会收听您的关键事件。为了解决这个问题，您可以在YouTube iframe上覆盖一个透明的div，并构建自己的播放/暂停按钮。这样，任何人都不能点击iframe而失去父窗口的焦点

---

我希望这有帮助

有人能给我指一些医生吗。Youtube表示，他们的开发人员在这里回答与此标签相关的所有问题，但似乎并不正确。我知道它在某种程度上解决了上述问题，但如果我真的需要专门处理上下箭头键事件呢？？因为我可以看到，默认情况下，youtube会处理左右箭头，但不会处理向上和向下箭头键。如果要使用向上和向下箭头键，可以为它们编写函数，然后将事件添加到switch语句中<代码>开关（e.which）{case 38:/*向上箭头键代码*/upfunction（）；break；case 40:/*向下箭头键代码*/downffunction（）；break；默认值：return；}这些键代码指的是特定的键。这里有一个指向mdn文档的关键代码链接：是的，我也这么做了，但我在这里面临的问题是，当光标位于youtube视频上时，这些事件不会得到处理。即使是您提供的示例，在30秒+搜索时间内单击视频外的剩余空间时，它也会起作用，默认情况下，youtube player处理前进和后退的左键和右键事件，但上键和下键的情况不同。因此，我想在这里尝试的是如何添加自定义事件，即使光标在视频上也可以工作。

<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)
    });
});