视频画中画（Picture-in-Picture）
由于我经常看b站和斗鱼，所以平时也会留意这两个网站的一些前端技术，比如说b站几个月前宣布推出了一个画中画（简称pip）功能，其实b站包括斗鱼很早就有了类似画中画的功能，只不过最新公布的可以在其他页面上层显示（宣传视频中点击按钮打开画中画，播放教学视频，同时可以在word中记笔记等）。由于这个api在之前在主流浏览器中兼容性一般，私以为这些网站较早版本的画中画应该是通过监听滚动事件并创造固定定位的元素来实现。同时，浏览器自带的画中画必须是用户主动触发才会显示，这样也从侧面表明之前的画中画功能应该是创建一个新的元素来实现的。
相关API
就只挑两个基本的方法讲讲...
进入画中画：video元素的新增方法requestPictureInPicture()（目前只有video元素能进入画中画），该方法返回一个promise，正常情况下这个promise里面是一个PictureInPictureWindow对象，通过该对象可以拿到画中画的一些属性。
退出画中画：document对象上的新增方法exitPictureInPicture()，一个页面只能打开一个pip窗口。
我们通过代码看看画中画的简单应用
// html
<video src="./assets/media/01.mp4" id="video" controls autoplay muted></video>
<button id="entry">进入画中画</button>
<button id="exit">退出画中画</button>
// js
const videoDom = document.getElementById('video');
const entryBtn = document.getElementById('entry');
entryBtn.onclick = () => {
openPiP(videoDom);
}
const exitBtn = document.getElementById('exit');
exitBtn.onclick = () => {
closePiP();
}
async function openPiP(video) {
try {
const pipWindow = await video.requestPictureInPicture() // 进入画中画模式
console.log('width:', pipWindow.width);
console.log('height:', pipWindow.height);
} catch (e) {
console.log(e) // 处理异常
}
}
async function closePiP() {
try {
// 退出画中画
document.exitPictureInPicture();
} catch (e) {
console.log(e);
}
}
在页面上增加一堆占位的块级元素，可以发现画中画是默认固定在右下角的，同时，页面最小化、切换浏览器页签这些操作也不会使画中画消失。
PiP相关API的兼容性
Page Visibility API
由于我之前常去的直播平台有斗鱼，b站，龙珠，经过对比发现斗鱼和b站从首页切换到详细的直播页之后首页的声音就自动停止了，然后我在网上找了下，发现这应该是通过页面可见性相关api实现的。
相关的API主要是两个
-
document对象上的属性visibilityState
这个属性主要有三个值
- hidden 页面彻底不可见
- visible 页面至少一部分可见
- prerender 页面即将或正在渲染，处于不可见状态
prerender状态只在支持"预渲染"的浏览器上才会出现，和我们的主题关系不大，这里就不讨论了。
出现hidden的几种情况：
- 浏览器最小化
- 浏览器没有最小化，但是当前页面切换成了背景页
- 浏览器将要卸载（unload）页面（切换tab，关闭窗口都属于这个情况）
- 操作系统触发锁屏屏幕
-
visibilitychange事件
只要document.visibilityState发生变化，就会触发该事件。通过document.addEventListener监听。
直接上代码
// video元素和上面的一样
window.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
document.title = '页面隐藏';
videoDom.pause();
} else if (document.visibilityState === 'visible') {
document.title = '页面可见';
videoDom.play();
}
})
关于打开页面video有声播放
为了优化用户体验，几年前主流的浏览器厂商限制了video元素的自动播放，要想自动播放只能禁音播放，可是斗鱼和b站居然能突破这一限制，我观察了其他的一些直播网站要么禁音，要么需要点击一下播放，至今我也没搞明白其中缘由，目前我所了解的解决办法只有用户在浏览器的权限设置中修改之后才可以默认有声播放视频。希望有缘人能为我解惑。
网友评论