新版画中画documentPictureInPicture API使用

最新推荐文章于 2024-08-09 10:42:44 发布

apades

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量695

点赞数 13

分类专栏：浏览器插件前端文章标签：前端

本文链接：https://blog.csdn.net/qq_41535611/article/details/134431974

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

浏览器插件

2 篇文章 0 订阅

订阅专栏

关于该API，chrome dev有一篇比较好入门的文章，如果你没看过强烈推荐你先看这篇基础用法，该文章只针对API的特性和chrome dev文章进行扩展性说明。

提前说明，目前该API是非w3c草案功能，从chrome 116开始已经强推到stable上了，你可以先在这看看你的浏览器能不能用，如果你的浏览器低版本chrome，可以地址栏到chrome://flags/#document-picture-in-picture-api这里看能不能开启

基本用法

.d.ts

interface Window {
  documentPictureInPicture: {
    window: Window
    requestWindow: (options?: {
      width: number
      height: number
    }) => Promise<Window>
    onenter: () => void
  }
}

直接调用documentPictureInPicture.requestWindow就可以弹出这样的画中画

这里非常不推荐用edge，都119版本了还是这样红色tab没法改，而且点左上角的证书信息有大概率浏览器崩溃，且其中运行的dom容易卡顿。问了reddit和edge support一直没有回信，已经放弃了

扩展说明

documentPictureInPicture.window和documentPictureInPicture.requestWindow()返回的window !== top，且有2个使用限制
1. HTTPS或file协议(这个好像是118后加上的，之前测试都没有出现过)
2. top window才能调用API
该window相当于打开了一个同源iframe，限制规则也基本等同，在窗口中可以打开独立的devTools
用{width,height}打开的画中画高度有偏差，好像还是不固定的，我另一台电脑宽高差8，这台差8,16