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

admin管理员组

文章数量:1027497

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

• • Hey, 我是 沉浸式趣谈
• • 本文首发于【沉浸式趣谈】，我的个人博客 也同步更新。
• • 转载请在文章开头注明出处和版权信息。
• • 如果本文对您有所帮助，请 点赞、评论、转发，支持一下，谢谢！

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

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

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

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

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

搞定！

给个简单的代码片段：

代码语言：javascript代码运行次数：0运行复制

<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 {
                    // 如果已经在画中画了，就退出
                    awaitdocument.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):
• • MDN 上的 Document PiP:
• • MDN 上的 requestWindow 方法:
• • (当然，也别忘了查查 HTMLVideoElement.requestPictureInPicture() 这个老朋友的文档)

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-05-03，如有侵权请联系 cloudcommunity@tencent 删除web兼容性浏览器视频api

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

• • Hey, 我是 沉浸式趣谈
• • 本文首发于【沉浸式趣谈】，我的个人博客 也同步更新。
• • 转载请在文章开头注明出处和版权信息。
• • 如果本文对您有所帮助，请 点赞、评论、转发，支持一下，谢谢！

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

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

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

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

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

搞定！

给个简单的代码片段：

代码语言：javascript代码运行次数：0运行复制

<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 {
                    // 如果已经在画中画了，就退出
                    awaitdocument.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):
• • MDN 上的 Document PiP:
• • MDN 上的 requestWindow 方法:
• • (当然，也别忘了查查 HTMLVideoElement.requestPictureInPicture() 这个老朋友的文档)

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-05-03，如有侵权请联系 cloudcommunity@tencent 删除web兼容性浏览器视频api

本文标签： 这个Web新API让任何内容都能画中画！