| 2 min read

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://googlechrome.github.io/samples/picture-in-picture/

You Can Speak "Hi" to Me in Those Ways