聊聊 Web 视频播放的画中画模式
Chrome 在升级到 70 的时候开始对视频播放的画中画模式开始支持了，用户在浏览器 Web 页面可以通过 画中画的形式强当前画面停留在屏幕正上方，无论你在使用其他软件还是切到其他 Tab ，都可以看到当前画面。
最新的 caniuse 我们可以看到已经覆盖了很多了浏览器版本，包括 最新的 Safari 甚至移动 Android 的 Chrome 浏览器。
特征检测
我们可以通过 video 元素上的 requestPictureInPicture 的方法以及 document.pictureInPictureElement 来判断浏览器是否支持画中画模式。
if ('pictureInPictureEnabled' in document) {
// do something
} else {
// not support
}
if (typeof videoEl.requestPictureInPicture === 'function') {
// do something
} else {
// not support
}
API 调用
我们可以通过调用 requestPictureInPicture 来实现画中画播放模式。
someBtn.addEventListener('click', async function(event) {=
try {
if (videoEl !== document.pictureInPictureElement){
await videoEl.requestPictureInPicture();
} else {
// 退出
await document.exitPictureInPicture();
}
} catch(error) {
log(`> Argh! ${error}`);
}
});
大致效果如下：
在执行画中画模式的时候会产生两个事件，方便大家监听。
enterpictureinpicture进入画中画模式leavepictureinpicture离开画中画模式
浏览器里画中画模式是互斥的，只能调用一个，最新的会顶替掉老的视频。