需使用Chrome/Edge（v≥110）并启用硬件加速，安装Multi PiP等扩展且开启“允许访问文件网址”，通过开发者工具执行requestPictureInPicture或chrome.runtime.sendMessage调用多画中画功能。
想让网页视频脱离当前标签页、自由悬浮在所有窗口之上，又不被其他画中画窗口挤掉，就得绕过浏览器原生的单实例限制——这正是扩展插件能解决的核心问题。
确认浏览器与系统基础支持
打开 Chrome 或 Edge（基于 Chromium 内核），地址栏输入 chrome://version，确认版本号 ≥ 110。低于此版本无法调用 chrome.windows.create 创建独立画中画窗口，后续所有操作将失败。
确保操作系统已启用硬件加速：Windows 设置 → 系统 → 显示 → 图形设置 → 浏览器进程设为“高性能”。禁用后会导致新建窗口黑屏或卡死在初始化阶段。
这一步不做，后面写再多代码也打不开第二个画中画窗口。
安装并配置多画中画扩展
方法一：直接使用现成扩展（推荐新手）
访问 Chrome 网上应用店，搜索 “Multi PiP” 或 “PiPifier”，选择评分 ≥4.7、更新时间在 3 个月内、用户数超 5 万的扩展。点击“添加至 Chrome” → 在弹出权限提示中勾选【读取和更改您在所访问网站上的数据】→ 点击“添加扩展”。
【必须开启“允许访问文件网址”】：右键浏览器右上角扩展图标 → “管理扩展程序” → 找到刚安装的扩展 → 开启“允许访问文件网址”开关。否则本地 HTML 视频页面无法触发画中画。
方法二：手动加载开发版（适合调试）
下载 GitHub 上开源项目 multi-pip-extension 的最新 release ZIP 包 → 解压 → 打开 chrome://extensions → 开启右上角“开发者模式” → 点击“加载已解压的扩展程序” → 选择解压后的文件夹根目录。
加载成功后，地址栏右侧会出现 Pip 图标，点击即可为当前页面任意 <video></video> 元素启用独立画中画窗口。
在网页中调用多窗口画中画功能
第一步：打开含视频的网页，如 Bilibili 某个播放页或本地 video.html 文件。
第二步：按 F12 打开开发者工具 → 切换到 Console 标签页。
第三步：粘贴执行以下代码（适用于已注入扩展 API 的环境）：
document.querySelector("video").requestPictureInPicture().catch(e => console.error("PiP 失败:", e));
第四步：若需强制新开第二个窗口（不关闭原有 PiP），执行：
chrome.runtime.sendMessage("扩展ID", {action: "createNewPiP", videoSrc: document.querySelector("video").src});
⚠️ 注意：“扩展ID”需替换为实际 ID，可在 chrome://extensions 页面对应扩展卡片下方找到，一串 32 位小写字母数字组合。输错则命令无响应，也不会报错。
跨平台兼容处理（Windows/macOS/Android）
Windows 与 macOS 用户无需额外操作，扩展自动适配系统级窗口置顶策略。
Android 端需额外授权：安装扩展配套的 Android App（如 PiP Bridge），打开 App 后授予“显示在其他应用上方”权限；再在 Chrome 地址栏输入 chrome://flags/#enable-picture-in-picture，将该实验性选项设为 Enabled 并重启浏览器。
iOS 不支持扩展机制，此方案不可用。Safari 无扩展 API 权限，无法注入脚本接管 <video></video> 元素。
