原来一直误会了，蘑菇视频官网的画中画我试了三种方案，最后选了这一种
前言 最近在给蘑菇视频官网做体验优化时，遇到一个看似简单但用户反馈很敏感的需求：播放视频时希望能画中画（Picture-in-Picture，简称 PiP），这样用户在浏览其他页面或操作时也能持续观看。我测试了三种常见方案，最终选择了最稳、最省心的一种。下面把过程、优缺点和实际接入代码分享给你——直接可拿去用在 Google 网站或普通网页上。
先说结论 最终方案：优先调用浏览器原生 Picture-in-Picture API，配合一个“回退方案”——在不支持原生 PiP 的环境下显示一个可拖拽的小浮窗播放器（纯前端实现）。这种组合兼顾了原生体验与兼容性。
三种方案对比 1) 浏览器原生 PiP API
- 优点：系统级浮窗、最省资源、自动置顶、用户体验一致（尤其在桌面 Chrome/Edge/Firefox 部分支持环境）。
- 缺点：需浏览器支持；跨域 iframe 的 video 需要允许属性；移动端支持不一。
- 适用场景：主力方案，适合现代桌面浏览器用户。
2) 页面内浮动播放器（fixed + JS 实现）
- 优点：完全可控、样式和交互自定义度高，兼容所有浏览器。
- 缺点：无法脱离浏览器窗口（不是系统级浮窗）、实现拖拽、同步与样式需要额外工作。
- 适用场景：作为不支持原生 PiP 的回退方案，或移动端的替代实现。
3) 第三方插件/扩展（如浏览器扩展、嵌入式播放器插件）
- 优点：有现成的 UI 和更多功能（字幕、广告管理等）。
- 缺点：体积大、集成成本高、依赖外部维护、可能有授权或样式限制。
- 适用场景：当你还要额外功能且可以承受体积和依赖时。
为什么选择“原生 PiP + 页面浮窗回退” 原生 PiP 在支持的环境下能提供最佳用户感受：系统层面的浮窗、最小化资源消耗和操作一致性。考虑到部分用户仍使用不支持该 API 的浏览器或移动端，单靠原生会丢失体验；纯页面浮窗则在所有环境可用，但体验上略逊一筹。因此结合二者，既保证大多数用户拿到最好的体验，也保证不会出现断崖式降级。
实战接入（可直接复制到你的网站） HTML（示例）
画中画
核心 JS（逻辑） const video = document.getElementById('mushroomVideo'); const pipBtn = document.getElementById('pipBtn'); const fallback = document.getElementById('fallbackMini'); const miniVideo = document.getElementById('miniVideo');
pipBtn.addEventListener('click', async () => { // 原生 PiP 支持且视频不在 iframe 限制下 if ('pictureInPictureEnabled' in document) { try { if (document.pictureInPictureElement) { await document.exitPictureInPicture(); } else { await video.requestPictureInPicture(); } return; } catch (err) { console.warn('请求原生 PiP 失败，切换回退方案', err); } }
// 回退：页面内浮窗形式 activateFallback(); });
function activateFallback() { miniVideo.src = video.currentSrc || video.querySelector('source').src; miniVideo.currentTime = video.currentTime; miniVideo.play(); fallback.style.display = 'block'; video.pause(); }
// 回退浮窗关闭或拖拽等交互可以按需扩展 // 例如拖拽实现、关闭按钮、回到原视频同步播放逻辑等
实现细节与注意点
- 如果视频嵌在 iframe 内，确保 iframe 标签有 allow="picture-in-picture" 属性，否则无法使用原生 PiP。
- 在原生 PiP 里某些控件会被限制，交互逻辑要考虑进入/退出 PiP 的状态同步（监听 document.pictureInPictureElement 改变事件）。
- 移动端用户多数使用浏览器自带播放器或限制较多，页面浮窗回退会更稳定。
- 保持播放时间与状态同步：进入回退浮窗时把 currentTime 同步，回到主播放器时也要同步回去。
真实测试感受 我在常见桌面浏览器（Chrome、Edge、Firefox）和手机浏览器上逐一测试：
- 桌面：原生 PiP 表现最佳，系统层浮窗便捷且流畅。
- 移动：多数浏览器对 PiP 支持有限，页面浮窗回退更稳定。
- 用户反馈：大多数人只关心能否在切换页面或处理邮件时继续看视频，所以体验一致性比花哨的交互更重要。
结尾话 集成时把原生 PiP 作为首选、页面浮窗作为稳妥的回退，会把兼容性和用户体验做到较好平衡。把上面的代码片段贴进你的 Google 网站脚本区，稍作样式调整，就能马上上线可用的画中画体验。需要我把“回退浮窗”的拖拽、关闭、回传播放状态等完整交互补全成一个拷贝即用的模块吗？
