griffith - 多个视频画中画问题

问题：同一个界面如果我们使用了过个griffith播放视频，在同时播放两个不同的视频，切同时点击画中画的时候，会导致画中画呈现的始终是第一个点击的画中画视频。

解决方案：
在播放视频前，重置画中画
那么可以使用参数“onBeforePlay”，注意onBeforePlay方法需要返回的是promise对象（很坑，查看源代码才看出来的）
首先是界面引入griffith,不明白的话，可以查看我的另外一篇文章在react中使用griffith

<PlayerContainer {...videoProps} /> 

const videoProps = {
      id: `ceshivideo`, // 播放器实例的唯一标识符
      title: "视频监控", // 影片标题
      cover: '', // 影片封面图片(没有的话，界面提示会error)
      duration: 182, // 初始视频时长。加载视频元数据后使用实际值
      sources: {
        fhd: {
          bitrate: 4000, // 码率
          duration: 182,
          format: 'mp4',
          height: 250,
          width: 300,
          play_url: videoInfo.url,  //这里是你的视频文件地址（url）
          size: 1080, // 尺寸
        }
      }, // 视频播放数据
      shouldObserveResize: true, // 监听窗口调整大小
      locale: 'zh-Hans', // 语言
      // disablePictureInPicture: true,
      autoplay: false, // 自动播放（自动播放时会静音）
      onBeforePlay: this.onBeforePlay
    };

核心代码

onBeforePlay = () => {
    const videoElement = document.querySelector('.enterPrise-center video'); // 这里是你的视频元素，我用的是react，所以用的是js
    // 如果画中画存在，则重置画中画
    if (document.pictureInPictureElement) {
      videoElement.requestPictureInPicture();
    } 
    return Promise.resolve();  
  }