使用 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

这取决于您要实现的目标。但是你的问题 "Is there any way I can handle key events specially when Arrow keys are pressed?" 的答案是肯定的。以下是使用左右箭头键的自定义 rewind/fast-forward 功能示例：

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 是一个完全独立的 window，因此您的关键事件将不会被监听。要解决此问题，您可以在 YouTube iframe 上覆盖一个透明的 div 并构建您自己的 play/pause 按钮。这样一来，任何人都不会点击进入 iframe 并失去父级的焦点 window。

希望对您有所帮助！

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

Handle key events when using Youtube iframe API

javascript

youtube-api

youtube-iframe-api

更新问题