前言

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

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

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

---

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

详细代码，保证搞定

示例代码

具体实现思路及代码如下，请直接复制运行