原理比较简单:浏览器有一个 API 叫做 MediaSession,它允许对标准媒体行为进行自定义,例如点击 pause 键时执行什么动作可通过 JavaScript 进行定义,利用这个特性,根据不同的按键操作,就可以发送不同的消息指令了,手机和电脑锁屏状态都可以控制。
结合 Picture-in-Picture API 还可以做出更多有趣的事情,画中画允许浏览器打开一个系统级置顶的 Video,很多视频网站也支持了这个特性,为了增加灵活性,又新出了一个 Document Picture-in-Picture API,它支持将任意 HTML 内容放置到这个画中画窗口中,并使用 MediaSession API 来控制窗体内容的交互和呈现方式。