这个Web新API让任何内容都能画中画！

大家好，我是 Immerse，一名独立开发者、内容创作者。

• 关注公众号：#沉浸式趣谈，获取最新文章（更多内容只在公众号更新）
• 个人网站：https://yaolifeng.com 也同步更新。
• 转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

“画中画”（Picture-in-Picture, PiP）说白了，就是让你能一边看视频，一边干别的，互不耽误。就像给你的桌面贴了个能播放视频的“便利贴”，你可以随便拖动它，调整大小，它还总在最前面，贼方便。

现在主流的搞法：老朋友 requestPictureInPicture()

其实，想让 <video> 元素实现画中画，现在已经有挺成熟的方法了，那就是直接在视频元素上调用 requestPictureInPicture() 这个 API。

用起来也挺简单，基本上就是：

1. 先搞个 <video> 标签，放上你的视频。
2. 找个时机（比如用户点个按钮），用 JavaScript 拿到这个 video 元素，然后调用 video.requestPictureInPicture()。

搞定！

给个简单的代码片段：

<video id="myVideo" src="your_video.mp4" controls width="300"></video>
<button id="pipButton">开启画中画</button>

<script>
    const video = document.getElementById('myVideo');
    const pipButton = document.getElementById('pipButton');

    pipButton.addEventListener('click', async () => {
        // 先检查浏览器支不支持，是个好习惯
        if (document.pictureInPictureEnabled) {
            try {
                // 如果视频没在画中画模式，就请求进入
                if (document.pictureInPictureElement !== video) {
                    await video.requestPictureInPicture();
                } else {
                    // 如果已经在画中画了，就退出
                    await document.exitPictureInPicture();
                }
            } catch (error) {
                console.error('操作画中画失败:', error);
            }
        } else {
            console.log('你的浏览器不支持画中画功能。');
        }
    });

    // 还可以监听进入和退出的事件，搞点事情
    video.addEventListener('enterpictureinpicture', () => {
        console.log('进入画中画啦！');
        pipButton.textContent = '退出画中画';
    });

    video.addEventListener('leavepictureinpicture', () => {
        console.log('退出画中画了。');
        pipButton.textContent = '开启画中画';
    });
</script>

大部分现代浏览器（Chrome, Edge, Firefox, Safari 这些）对这个 API 支持得都还不错（当然，细节上可能有点小差异，用的时候最好还是查查 MDN 或者 Can I Use）。

那 documentPictureInPicture.requestWindow 是个啥？

window.documentPictureInPicture.requestWindow 更像是个“升级版”或者说“野心更大”的亲戚。

requestPictureInPicture() 这个老朋友，它的目标很明确，就是把 <video> 元素 扔进画中画窗口。

而 documentPictureInPicture.requestWindow() 这个新来的呢，它的目标是 把任意的 HTML 内容（理论上是这样的，比如一个 <div>，里面可以包含视频、按钮、文字等等）放进那个悬浮的小窗口里！

小结一下

• 目前最常用、最稳妥的实现方式是针对 <video> 元素的 requestPictureInPicture() API。兼容性相对较好，用起来也直接。
• 那个新出的 documentPictureInPicture.requestWindow API 呢，目标更宏大，想让任意 HTML 都能 PiP。

对这个新技术感兴趣的朋友，可以去翻翻官方文档（下面附了链接），了解下最新进展。

不过动手实践的话，还是先从老朋友 requestPictureInPicture() 开始吧，至少不会被兼容性搞得头秃，哈哈。

参考资料放这儿了：

• 关于 Document PiP (新 API): https://developer.chrome.com/docs/web-platform/document-picture-in-picture?hl=zh-cn
• MDN 上的 Document PiP: https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentPictureInPicture
• MDN 上的 requestWindow 方法: https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentPictureInPicture/requestWindow
• (当然，也别忘了查查 HTMLVideoElement.requestPictureInPicture() 这个老朋友的文档)

其他好文推荐

2025 最新！独立开发者穷鬼套餐

Windows 安装 Claude Code 的新姿势，保姆级教程

最近 Vibe Coding 的实践经验分享

分享一款 AI 自动生成流程图的工具

一个 Cursor mdc 自动生成器，基于 Gemini 2.5，很实用！

这个 361k Star 的项目，一定要收藏！

搞定 XLSX 预览？别瞎找了，这几个库（尤其最后一个）真香！

1分钟把简历变成个人网站！这个免费工具太香了

关于 MCP，这几个网站你一定要知道！

做 Docx 预览，一定要做这个神库！！

【完整汇总】近 5 年 JavaScript 新特性完整总览

关于 Node，一定要学这个 10+万 Star 项目！