使用键盘的媒体按键控制视频播放

Chrome 将会在 73 的版本，带来新的媒体控制策略。其中为了推进 PWA 的进度，扩展了媒体播放与键盘的交互。

如果我们使用 Mac 的话，大家一定见过最上面(如果带 touch bar，则是 touch bar) 快进，下一曲，暂停，静音等按键。

很早之前我们介绍过使用 mediaSession 实现媒体播放的控制
，在移动端设备上，你可以在锁屏或者通知栏来进行 Web 音乐的播放，而现在，你可以在 PC 上实现这些功能。

navigator.mediaSession.setActionHandler('previoustrack', function() {
    console.log('prevoious')
});

      navigator.mediaSession.setActionHandler('nexttrack', function() {
    console.log('next')
});

navigator.mediaSession.setActionHandler('play', function() {
    video.play();
});

navigator.mediaSession.setActionHandler('pause', function() {
    video.pause();
});

navigator.mediaSession.setActionHandler('seekbackward', function() {
   video.currentTime = Math.max(video.currentTime - 5, 0);
});

navigator.mediaSession.setActionHandler('seekforward', function() {
   video.currentTime = Math.min(video.currentTime + 5, video.duration);
});

目前 video 静音下，控制是无效的，以及你最好目前使用 Chrome Canary 体验该功能。

http://events.jackpu.com/hardware-media-keys-control-video-playback/

扩展阅读