前端借助 Document Picture-in-Picture API 实现画中画功能

今天, 我们介绍一个非常有意思的API
就是 Document Picture-in-Picture , 这个API能做什么呢?
他可以打开一个始终在顶层的窗口, 不知道大家熟悉不熟悉, 我们打开视频软件看视频的时候, 貌似打开过很小的一个窗口

大家看我上面的截图, 就是从腾讯视频官网打开的一个电影画中画效果
那么, 这种效果如何实现呢,
其实, 借助 Document Picture-in-Picture 就可以实现画中画效果
实现之前, 我们来准备一下基础的骨架和样式

简单的结构, 我们已经写好了
我们运行看看效果
现在我们给按钮注册点击事件, 点击之后, 我们生成pip窗口

那么问题来了, 如何打开pip窗口呢?
其实呢, 可以通过 window.documentPictureInPicture 属性来获取一个新的DocumentPictureInPicture 对象实例, 该实例就表示当前文档上下文中始终处于最顶层的画中画窗口, 那么还是没法实现画中画窗口的打开啊
打开画中画窗口, 我们可以使用 pip.requestWindow() 方法进行打开, 该方法返回一个 Promise
我们来写一个基本代码

这样画中画窗口就打开了, 貌似是空白的, 没有样式了, 这个怎么搞呢?
我们新建一个css文件, 写一些简单的样式

现在我们将该样式通过link进行引入
const link = document.createElement(‘link’)
link.rel = ‘stylesheet’
link.href = ‘./style/index.css’
pipBox.document.head.appendChild(link)
引入完成之后, 我们再次点击生成画中画, 看看效果

这样我们画中画的效果就实现了
在写这篇文章示例的时候, 我打开画中画, 当前的节点会消失, 这个怎么解决呢?
我们可以使用 cloneNode 来进行节点克隆, 该方法接受一个参数, 表示是否深度克隆节点, 我们传入一个 true 即可, 我们将克隆节点放入画中画就可以啦

接下来, 我们说一下画中画的进入和关闭事件, 想要使用画中画效果, 进入和关闭画中画需要做什么操作, 这是非常关键的一点
我们来实现下
documentPictureInPicture.addEventListener(‘enter’, () => {
console.log(‘进入画中画了’)
})

pipBox.addEventListener(‘pagehide’, () => {
console.log(‘退出画中画了’)
})
我们看下打印效果

今天, 我们就讲解到这里
我们下期见

她的码农
酷爱前端开发，酷爱写作，向全栈工程师奋进！
330篇原创内容
公众号
JavaScript
43
JavaScript · 目录
上一篇
借助pdf.js和canvas实现pdf文件首页渲染