用户点击 YouTube iframe 时的键盘监听器？

Question

我对此有一个大问题。我有一个 Javascript 网站，可以检测用户向左和向右箭头以在 Div 之间切换。但是，当用户单击 YouTube 嵌入（例如“静音”或“取消静音音量”）时，keyEvent 将停止工作，直到用户重新单击页面的任何部分。

有什么方法可以让关键事件保持工作状态，即使用户点击了 iFrame 中的 YouTube 嵌入吗？

Answer 1

和你一样，我也遇到过同样的问题。尽管此评论可能为时已晚，但我认为为那些寻找在用户点击时取消 YouTube iframe 焦点的方法的人分享一个解决方案仍然很有价值。

我们应该创建一个函数并将其附加到

onStateChange

事件，根据我们的目标将其链接到

event.data in [1,2,5]

。因此，当用户点击 iframe 时，他们通常想要播放、暂停或快退，这将触发

onStateChange

事件。然后我们就可以捕获这个事件并返回焦点。

function forceUnFocusPlayer() {
        const $player = $('#youtubeVideoPlayer');
        $player.attr('tabindex', -1); // Set tabindex to -1 to make it unfocusable
        $player.focus(); // Focus on the player
        setTimeout(() => {
            $player.blur(); // Unfocus the player after focusing
            $player.attr('tabindex', 0); // Restore the original tabindex
        }, 0);
}