聊聊 Web 视频播放的画中画模式

更新日期: 2019-11-19 阅读: 4.4k 标签: 视频分享

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