video画中画

最近项目中使用到了画中画功能，以前一直没有做过，刚好这次梳理一下相关的方法和判断;

1. 检查浏览器是否支持画中画功能：

if ('pictureInPictureEnabled' in document) {
  // 支持画中画功能
} else {
  // 不支持画中画功能
}

2. 检查当前视频元素是否支持画中画功能：

const videoElement = document.querySelector('video');
if (videoElement && typeof videoElement.requestPictureInPicture === 'function') {
  // 当前视频元素支持画中画功能
} else {
  // 当前视频元素不支持画中画功能
}

3.判断当前元素是否是画中画元素

var video = document.getElementById('video'); 
if (document.pictureInPictureElement === video) { 
    console.log('视频处于画中画模式'); 
    document.exitPictureInPicture(); // 取消画中画
} else { 
    console.log('视频不处于画中画模式'); 
}

4.监听画中画开启关闭

var video = document.getElementById('video');
video.addEventListener('enterpictureinpicture', function(event) {
    console.log('进入画中画模式');
});
video.addEventListener('leavepictureinpicture', function(event) {
    console.log('离开画中画模式');
});

使用举例：当点击后触发视频画中画：

const videoElement = document.querySelector('video');
const buttonElement = document.querySelector('button');

buttonElement.addEventListener('click', () => {
  if (videoElement && typeof videoElement.requestPictureInPicture === 'function') {
    // 开启画中画: videoElement.requestPictureInPicture();
    // 取消画中画: document.exitPictureInPicture();
  }
});