HTML5 视频播放器进度条在 Chrome 中看起来很奇怪

我有一个 Angular 15 项目，我在其中使用 html5 视频播放器。

播放开始前，进度条如下所示：

视频播放时，进度条如下所示：

这只是 Chrome 相关的问题。 Firfefox 和 IE 工作正常。有什么信息可能导致这种情况吗？

0
投票

首先，您应该意识到有人似乎在传播有关如何让 Chrome/Chromium 正确显示 HTML 视频控件的虚假信息。

其次，我可以在 macOS 上确认您报告的行为。使用具有最少样式的页面：

Safari 和 Firefox 都会适当地显示基本的 HTML5 视频元素；
Chrome 和 Chromium 将其显示为您显示的过高黑条。我已经使用 Chrome 版本 120.0.6099.129 进行了测试，并确认 Brave 版本 1.61.109 Chromium：120.0.6099.144 和 Opera 版本 13.5.2 13.5.2 Chromium 版本：120.0.6099.130 的外观相同。

Google.com 希望每个人都在 YouTube 上发布他们的视频，这可能是相关的。为了保护 YouTube 的垄断地位，它可能想让像您这样的人难以展示您在其他地方托管的视频。

我的建议是，您警告观看者视频控件将无法在 Chrome 和基于 Chromium 的浏览器上正确呈现，并建议他们切换到有损用户体验的浏览器。在 macOS 上，Safari 和 Firefox 在渲染基本视频控件方面都做得更好。

我还没有确认 Windows 上的结果，但我敢打赌 Edge 的视频控制看起来和 macOS 上的 Chrome 和 Chromium 一样糟糕；即使您不使用任何 JavaScript 或 CSS 自定义控件，Firefox 也会合理地渲染控件。

如果拥有 Windows 计算机的人可以检查并发布他们所发现内容的描述，将会很有帮助。但话又说回来，我们如何知道这份报告是来自说真话的人，还是来自散布虚假信息的人？