🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志
随着 Chrome 116+ 支持 Document Picture-in-Picture API 的出现,我们终于可以把整个页面内容(不仅仅是 <video>)移入画中画小窗口中,并在小窗中实现自定义控件、播放进度操作等功能。
本文博主将带着小伙伴们实现一个主页面和小窗同步视频控制功能,例如在主窗口暂停、小窗也同步暂停;调节音量、跳转进度也保持一致,提升用户体验。
1. 前言
不知道小伙伴是否发现 B 站的视频播放中,有一个功能 画中画 ,当用户点击会展现一个小窗播放,即使将主窗口缩起来,小窗口依然保留在外面电脑桌面上,如下图:
开启画中画(小窗口)

收缩主窗口

2. 为什么要使用 Document PiP API
在当今多任务处理的时代,用户经常需要在观看视频的同时进行其他操作(如浏览信息、回复消息等)。小窗模式(画中画)解决了这一需求,让视频可以浮动在页面上方,同时用户可以自由浏览其他内容。
与传统 Picture-in-Picture 的区别

- 传统的画中画
API功能有限,无法带自定义控件与交互 - 新的
API可以让整个文档出现在独立的小窗口中,支持丰富交互,如播放、暂停、音量、进度条等 - 特别适用于视频会议、在线课程、弹幕播放器、以及需要自定义控制画中画的小应用
新
API优势
完整 HTML 支持:可包含按钮、进度条等交互元素
无缝集成:与原始页面共享 JavaScript 上下文
尺寸灵活:可自定义小窗尺寸
双向通信:主页面与小窗实时同步
3. 完整代码案例
代码中 1.mp4 为博主本地保存测试的视频,大家可以自行获取相应资源源,修改 video 的 src 即可



