Html 如何显示视频持续时间，但减少下载数据？

我的网站中嵌入了HTML5视频，如下所示：

<video poster="videoposter.jpg" controls="">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>

MP4视频采用h.264编码，总容量为30 MB。目前，Chromium 86和Firefox 82在加载页面时将加载数百KB的MP4文件。我想减少这一点，使网站更容易与有限的数据量的人。但我还想在单击播放之前使视频持续时间可见

如您所见，我目前不使用该属性。使用

preload=“metadata”

我认为浏览器的加载稍微少一些（可能是500 KB而不是900 KB），但这似乎有时会发生变化；而且还是很多

使用

preload=“none”

时，视频根本没有预加载（非常好-数据使用率非常低），但现在播放器在我主动单击播放之前不会显示视频持续时间

根据

moov

视频文件头的大小约为50kb。因此，我的理解是，浏览器只需预加载50KB的视频即可获得文件的持续时间。为什么浏览器会尝试获取500KB

以下是声明：

对于webdevs来说，这似乎是一件微不足道的事情 正确配置他们的Web服务器

---

这是否意味着我必须在web服务器端更改某些内容？Apache是否决定在范围请求中发送多少？或者我必须更改视频文件来优化它？或者预加载的大小完全由浏览器决定，我没有办法影响吗？

更糟糕的是，Chromium DevTools似乎有点不可靠。对于网络，选项卡显示传输了4.1 KB（太棒了！），但Wireshark显示接收了324 KB。不知道我在这里的理解是否是错误的，或者它是一个Chromium bug，或者Chromium试图让WEBM看起来更好；但这使得获得有用的指标变得更加困难。