实现视频小窗口播放-画中画

实现效果： 视频播放时，页面下拉滚动，超出视频视线范围，则右下角出现小窗口播放视频。

实现逻辑：同一个视频，运用监听方法，当原视频未出现在窗口内时，视频容器增加一个css类，并poisiton: fixed 定位，调整容器的大小以及样式，待原视频出现在窗口内，就移除相关css类即可。

用到的方法：IntersectionObserver API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。

const interObserver = new IntersectionObserver((entries) => {
            // isIntersecting 为true 说明元素在root 的视线内
        if (entries[0].isIntersecting === false) {
          this.showPicture(); // 显示小窗口视频
        } else {
          this.exitPicture(); // 退出小窗口视频
        }
      }, {
        root: null, // viewport 元素，null默认就是相当于window 窗口
        threshold: 0 // 可视区域为0 视为曝光，也可以设置0，0.2，0.5，0.8 等值
      });
interObserver.observe(document.querySelector(".videoplayer"));

IntersectionObserver.observe(document.querySelector(".videoplayer")) 监听方法

IntersectionObserver.unobserve(document.querySelector(".videoplayer"))  取消监听