JavaScript 检测播放/暂停键盘(虚拟)键

Joe*_*e50 7 javascript google-chrome media-player dom-events

无意间,我刚刚按下播放/暂停(?/??)按钮我的键盘(按钮上略高于Num Lock联想键盘,同时在未聚焦的选项卡中播放 YouTube 视频。令我大吃一惊的是,YouTube 视频立即暂停。

现在,我尝试查找它是如何工作的,但我无法在互联网上找到任何解释如何检测这样的按键的按键的任何内容。我尝试onkeydown = function(e) {console.log(e)}在我的控制台中运行,但按下播放/暂停按钮没有触发任何事件。此外,https://keycode.info/也没有给我任何帮助。我确实找到了http://www.kbdedit.com/manual/low_level_vk_list.html,其中列出了大量“虚拟键代码”,其中确实包括VK_MEDIA_PLAY_PAUSE,这可能是我按下的键,但我没有找到任何方法用这个在 JS 中触发一个事件。

现在我想指出这个功能似乎在 Firefox 中不起作用,只能在 Chrome 中运行(就我测试过的而言)。这可能仍处于实验阶段,但我真的很想听听 YouTube 使用什么系统来捕获此事件,即使当前未打开该选项卡(Chrome 此刻甚至没有聚焦)

PS:我在 Ubuntu 18.04 上遇到过这种情况;例如,我不确定这是否适用于 Windows。

Dav*_*jor 6

Chrome 负责(硬件媒体密钥处理),有关更多详细信息,请查看 chrome://flags/#hardware-media-key-handling

这里还有包含文档和演示的链接:https : //www.chromestatus.com/feature/5639924124483584


Jes*_*nee 6

来自Google Chrome Media 会话示例

/* Media navigation Action handlers */

    navigator.mediaSession.setActionHandler('previoustrack', function() {
      console.log('> User clicked "Next Track" icon.');
    });

    navigator.mediaSession.setActionHandler('nexttrack', function() {
      console.log('> User clicked "Next Track" icon.');
    });

    navigator.mediaSession.setActionHandler('play', function() {
      log('> User clicked "Play" icon.');
      // Do something more than just playing audio...
    });
Run Code Online (Sandbox Code Playgroud)

这些 chrome api 在 chrome 57+ 和 Firefox 82+ 上可用