深入解析html5 <video></video>标签的视频预加载和分段下载机制
本文将深入探讨HTML5 <video></video>标签如何控制视频预加载时长，以及如何运用Range请求头实现视频分段下载。我们将解答两个关键问题：浏览器<video></video>标签默认预加载约30秒视频是否可控？浏览器如何计算Range请求头中指定视频片段的字节范围，以及该字节范围与视频时长的关联？
首先，浏览器<video></video>标签的预加载时长并非由API直接控制。虽然浏览器通常会预加载一部分视频以优化用户体验，但实际预加载时长受浏览器策略、网络状况和视频文件特性等多种因素影响，没有统一的API接口可精确控制。预加载是浏览器自动进行的优化。
其次，浏览器分段加载MP4视频依赖HTTP请求头中的Range字段。用户点击视频进度条时，浏览器会计算目标片段在视频文件中的字节偏移量，然后在请求中使用Range头指定下载字节范围，例如：Range: bytes=31162368-33914879，表示请求从字节偏移量31162368到33914879的数据。 这个字节范围并非直接由秒数计算，而是需要考虑视频编码方式、帧率等因素。简单的秒数与文件大小比例计算无法精确得出每秒对应的字节数，因为视频编码会压缩数据，不同片段的压缩率也不同。浏览器根据视频元数据（例如MP4文件的moov原子）和编码信息精确计算字节偏移量，确定Range请求头值。服务器接收到Range请求后，返回对应片段并设置206 Partial Content状态码（如图所示）。浏览器可同时请求多个片段，用逗号分隔多个字节范围，服务器则使用multipart/byteranges Content-Type返回多个片段。
最后，浏览器发起的请求并非总能在开发者工具中直接观察到，这与浏览器的网络请求管理机制有关。许多底层请求不会暴露给开发者工具。
立即学习“前端免费学习笔记（深入）”；
