Vue3 - 实现视频小窗播放功能效果，仿B站视频播放效果，网页视频播放器下拉后悬浮在右下角进行小窗口贴合跟随播放（vue3滚动到视频离开可视区后出现小窗，类似b站小窗口播视频播放，视频小屏画中画）

前言

如果您需要 Vue2 版本，请访问 这篇文章。

在 vue3 项目开发中，详解视频离开可视窗口时，在右下角显示小窗口（视频播放器+小窗播放效果），当页面下滑时播放器会悬挂在网页右下角，持续进行播放并可以暂停或关闭小窗，类似哔哩哔哩（B站）视频小窗效果，实现B站页面滚动开启小屏播放功能，当滚动条滚动到主视频界面离开可视窗口时，出现小窗继续播放（跟随鼠标悬浮在可视窗口）浏览器兼容性好且灵活扩展性高。

提供详细示例代码，新手小白复制运行即可。

---

如下图所示，自定义播放器样式，悬浮位置或距离等。

详细代码，保证搞定

示例代码

具体实现思路及代码如下，请直接复制运行测试即可。