ribbon image search rewind fast-forward speech-bubble pie-graph star

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

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/

扩展阅读

You Can Speak "Hi" to Me in Those Ways