javascript - 使用 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 
          }
        });
      }

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

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

更新问题

正如下面的答案所暗示的那样，这在某种程度上当然是一种解决方案，但由于 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 而失去父窗口的焦点。

希望对您有所帮助!