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 离开画中画模式

浏览器里画中画模式是互斥的，只能调用一个，最新的会顶替掉老的视频。

原文：https://www.jackpu.com/liao-liao-web-shi-pin-bo-fang-de-hua-zhong-hua-mo-shi/

链接: https://fly63.com/article/detial/6925