更新问题

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并失去父窗口的焦点。

我希望这有帮助！

使用Youtube iframe API处理关键事件

更新问题

1 个答案: