聊聊 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}`);
  }
});

大致效果如下：

体验地址

在执行画中画模式的时候会产生两个事件，方便大家监听。

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

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6925