Greasy Fork镜像

您好，我查看了您和评论区另一位小伙伴的想法之后，做了一款全新的插件，叫做B站视频进度条。

功能

• 用圆环进度条显示进度，实现了视频合集进度时长百分比统计图像显示；
• 鼠标移动到圆环进度上，可以显示统计的总时长、已观看时长和剩余时长，时间进度等自动更新；
• 任意拖动功能，可以用鼠标将该工具拖动到网页任意地方；
• 后续功能待改进中……

欢迎一起学习！

代码地址

• Greasy Fork镜像:B站视频进度条
• GitHub:Bilibili_Video_Progress_Tool

效果

希望一起探讨的问题

Q1:【兼容问题】脚本无法在不同浏览器使用？

我遇到的问题是在Edge上可以完美显示这个插件效果，但是在Chrome上就显示不出来了。我本来以为这是我一个人会遇到的问题，但是我使用您的脚本进行兼容测试后发现，您的脚本也显示不了，不知道您有没有解决办法呢？ 我尝试的解决方法有如下：

• 1. 确保Tampermonkey插件已启用。 打开Chrome浏览器，点击右上角的菜单按钮（三个竖点）。 选择“更多工具” -> “扩展程序”。 确保Tampermonkey插件已启用，并且没有被禁用或卸载。
• 2. 检查Tampermonkey脚本是否正确加载。 打开Tampermonkey的管理面板（可以在扩展程序页面找到Tampermonkey的图标，点击后选择“管理面板”）。 确保脚本已启用，并且匹配规则正确。 点击脚本的“详细信息”，确保脚本有足够的权限来访问目标网站。
• 3. 清除浏览器缓存。 打开Chrome浏览器，点击右上角的菜单按钮（三个竖点）。 选择“更多工具” -> “清除浏览数据”。 选择“高级”选项卡，勾选“缓存的图像和文件”，然后点击“清除数据”。
• 4. 禁用其他浏览器扩展 打开Chrome浏览器，点击右上角的菜单按钮（三个竖点）。 选择“更多工具” -> “扩展程序”。 禁用其他可能与Tampermonkey冲突的扩展。
• 5. 检查Chrome浏览器的权限设置 打开Chrome浏览器，点击右上角的菜单按钮（三个竖点）。 选择“设置” -> “隐私和安全” -> “网站设置”。 确保Tampermonkey插件有足够的权限来运行脚本。
• 6. 使用调试工具 在关键位置添加console.log输出，查看代码执行到哪一步停止。
• 7. 确保页面完全加载后执行脚本。 使用window.onload确保脚本在页面完全加载后执行。
• 8. 检查控制台错误。 打开Chrome的开发者工具（F12或右键点击页面选择“检查”），查看控制台是否有任何错误信息。

以上是我实验的方法，但是还是没有解决问题，如果您有想法可以一起讨论！

Q2:【有待改进-功能】脚本不能在全屏模式下显示？

我想到的解决方法有：用全屏检测进度条容器，将进度条进行重新定位。希望可以给您一点启发~

感谢您的使用和建议，我认为您的进度条饼图更加直观并且添加事件监视器同步了正在播放视频的时长，此外还带有拖动功能（在我更新的插件中我是直接使用的关闭/开启方式防止遮挡，您的方式选择性更灵活），我学习到了，另外关于您提及的两个问题我就简单回复一下：

Q1.脚本无法使用

我也使用的是Chrome浏览器，但是我这边并没有任何故障，您的脚本在我的Chrome浏览器上也可以正常展示，我个人猜测会不会是有其他油猴插件造成了影响？

Q2.关于全屏显示

我目前还没有考虑这个问题，因为我个人要频繁看选集内容，因此在刷剧中很少全屏，所以在一开始编写脚本的时候只想着可以直接展示时间的脚本即可，不过您的问题很有价值，我回头空闲了一定会学习一下，期待与您的再次讨论！

感谢您的使用和建议，我认为您的进度条饼图更加直观并且添加事件监视器同步了正在播放视频的时长，此外还带有拖动功能（在我更新的插件中我是直接使用的关闭/开启方式防止遮挡，您的方式选择性更灵活），我学习到了，另外关于您提及的两个问题我就简单回复一下：

Q1.脚本无法使用

我也使用的是Chrome浏览器，但是我这边并没有任何故障，您的脚本在我的Chrome浏览器上也可以正常展示，我个人猜测会不会是有其他油猴插件造成了影响？

Q2.关于全屏显示

我目前还没有考虑这个问题，因为我个人要频繁看选集内容，因此在刷剧中很少全屏，所以在一开始编写脚本的时候只想着可以直接展示时间的脚本即可，不过您的问题很有价值，我回头空闲了一定会学习一下，期待与您的再次讨论！

感谢您的回复！我个人是没用其他插件的，所以很大可能排除插件影响？不过您说的这个角度确实还是有可能的，回头我再测试测试。如果后续我解决了问题，我会回来贴一下我的解决方案的。期待与您的再次讨论！