使用 HTML5 视频播放器进行视频流式传输答案

【问题标题】：Video streaming with HTML5 video player使用 HTML5 视频播放器进行视频流式传输
【发布时间】：2021-03-14 22:38:28
【问题描述】：

我正在尝试了解使用 HTML5 视频播放器进行视频流的工作原理，对此我有一些疑问。

我的 HTML 页面上有这样的声明

        <video controls  class="card-img-top">
            <source src="/stream/video.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>

URL /stream/video.mp4 由发送数据的 Spring Boot 控制器处理。一切正常，但我认为它非常低效。

每次我将视频时间轴上的滑块移动到任何一点时，我都会看到带有Range 标头的请求

范围：字节=88375296-
范围：字节=39354368-
范围：字节=60915712-

这意味着在每次视频滚动时，我都必须提供从指定点到视频文件末尾的所有数据。看起来效率真的很低。

有没有办法配置 HTML5 播放器以更有效的方式工作？另外，您能否推荐一些有关使用 Spring Boot 实现视频流的内容？

【问题讨论】：

标签： spring-boot video video-streaming html5-video

【解决方案1】：

这意味着在每次视频滚动时，我都必须提供从指定点到视频文件末尾的所有数据。

浏览器请求从指定点到文件末尾的所有数据，但是，当搜索发生时，它可以简单地断开 TCP 会话以停止下载。它尽可能高效。

有没有办法配置 HTML5 播放器

不，当您告诉浏览器播放 MP4 时，您将所有控制权都交给了浏览器。您无法控制它的工作方式。

如果您想要更多控制，可以使用媒体源扩展。但随后您将需要在服务器端使用更高级的文件格式并实现播放器工作方式的所有细节。见 HLS/DASH

【讨论】：

我刚刚发现对于1234- 范围请求，我可以使用从 1234 字节开始的任意大小的块来回答。可能这是避免不必要读取的一种方法。从文件。可以使用这种方法吗？这是我当前的代码github.com/usharik/geek-video-stream/blob/master/geek-tube/src/…
我认为还值得一提的是，浏览器会将 TCP 窗口大小一直降低到零，以防止获取的数据超出缓冲范围。