如何使用 html5 视频标签在前端逐块显示大视频文件？答案

【问题标题】：How to display big video files chunk by chunk on frontend using html5 video tag?如何使用 html5 视频标签在前端逐块显示大视频文件？
【发布时间】：2022-12-21 20:09:18
【问题描述】：

我在前端有 3 个静态视频，所有视频的大小大约为 21-22mb。

<video autoplay="true" src="videos/video1.webm"></video>
<video autoplay="true" src="videos/video2.webm"></video>
<video autoplay="true" src="videos/video3.webm"></video>

它们的 html autoplay 属性设置为 true，因此它们需要在 get 请求后立即播放，或者在我的情况下，最大延迟 3-4 秒后播放。但问题是，网页只有在完全下载后才开始播放。

我怎样才能为他们每个人做一个缓冲？

【问题讨论】：

标签： html html5-video

【解决方案1】：

听起来您希望视频逐步下载 - 即在下载继续时开始播放。

最简单的方法是确保托管视频的服务器支持范围请求。如果您使用的是 mp4 文件，您还需要确保视频在开头有标题数据，但这对 webm 来说不是问题。

一旦您的服务器支持范围请求，那么您的浏览器视频元素应该自动请求块中的视频并在它有足够的时间开始播放，假设您将其设置为自动播放或点击播放按钮。

您可以在下面的链接中查看有关范围请求的更多信息，包括以下简单检查以查看您的服务器是否支持此功能：

curl -I https://yourVideoUrl

(https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests)

如果您得到的结果表明不支持范围请求，那很可能是服务器上的配置问题，因此请与您的服务器管理员联系。

【讨论】：