视频画中画（Picture-in-Picture）
在项目中，遇到这样一个需求：
实现类似b站视频播放的效果，即视频点击播放后，页面向下滚动至视频盒子消失在浏览器视口时，自动弹出画中画效果，当页面向上滚动至视频盒子出现在视口时，取消画中画效果
经过调查，发现一套浏览器自带的画中画API，
// 进入画中画
video.requestPictureInPicture();
// 退出画中画
document.exitPictureInPicture();于是尝试进行使用，测试了一下发现第一次使用完全ok，
问题：页面向上滚动恢复原视频盒子后，再次向下滚动页面就无法触发画中画的开启，并且控制台报错：NotAllowedError: Must be handling a user gesture to request picture in picture.
经过调查，发现出现这个问题的原因如下：
该API规定只有用户与页面交互后，才能触发，有点类似视频自动播放无法开启音量
scroll也就是滚动事件并不是浏览器认为的被用户信任的事件（不算与页面产生交互），而点击事件是。所以这也就解释了为什么第一次可以正常触发画中画API（因为播放视频需要点击开始播放按钮），而第二次用户没有任何操作，只是单纯的滚动鼠标滚轮，所以无法触发第二次
那么如何解决呢？
基于项目的需求，实现类似b站的效果，只能自己手动实现，具体实现过程简要整理如下：
- 滚动监听视频盒子位置
- 改变盒子position为fixed
- 调整底部视频播放设置栏以及拖拽和缩放效果