HTML5 视频：检测带宽

Posted 2023-05-08

【中文标题】HTML5 视频：检测带宽

【英文标题】：HTML5 Video: Detecting Bandwidth

【发布时间】：2012-07-05 02:58:54

【问题描述】：

我有一个 1080p 视频，在我的页面上以 html5 <video> 标记显示。

是否有一种简单的（ish）javascript 方法来检测带宽，以便如果用户的连接速度太慢而无法流式传输视频，我可以将视频切换为较低质量的版本？类似于 YouTube 的“自动”视频尺寸选择器背后的逻辑。

【问题讨论】：

它有点老了，但你可能想看看速度测试api。

我想知道为什么视频中没有srcset 或类似的东西？这将解决 90% 的情况，即用户从手机加载视频...

【参考方案1】：

根据您使用的播放器和编码平台，您可能可以对视频使用 HLS 编码。 HLS 代表 HTTP Live Streaming，这是一种由 Apple 开发的协议，主要用于解决这个问题（以及其他问题）。

HLS 基本上将您的视频文件分解为多个小文件，因此它们可以使用简单的 Web 服务器进行“伪”流式传输。使用 HLS，您还可以以多种分辨率进行编码，并且播放器可能能够切换到更低或更高的带宽。

唯一的缺点是大多数播放器使用 Flash 播放 HLS 编码的内容。在此处查看实际情况：http://www.flashls.org/latest/examples/chromeless/

这是 flowplayer 的 HLS 演示： http://demos.flowplayer.org/basics/hls.html

这里有一个 VideoJS 插件： https://github.com/videojs/videojs-contrib-hls

要在 HLS 中编码，您可以免费使用 ffmpeg 并将文件上传到您的服务器： https://www.ffmpeg.org/ffmpeg-formats.html#hls-1

或者，您可以使用基于云的解决方案，例如 AWS Transcoder 或 Brightcove https://aws.amazon.com/elastictranscoder/

【讨论】：

videojs-contrib-hls: "该项目通过在支持媒体源扩展或支持 Flash 的浏览器上为 HLS 提供 polyfill 来解决这种情况。您可以部署单个 HLS流，针对常规 HTML5 视频 API 进行编码，并在所有大型网络设备类别中创建快速、高质量的视频体验。“太棒了！正是我需要的！非常感谢！

对于与玩家无关的 HLS 客户端，请尝试由 DailyMotion 引入的 hls.js。 videojs-contrib-hls 绑定到 video.js。

【参考方案2】：

在谷歌浏览器中，视频元素至少有以下属性：

webkitVideoDecodedByteCount: 0
webkitAudioDecodedByteCount: 0

这些应该足以确定客户端解码视频的速度。随着视频的播放，您将跟踪这些字节的增量数量，从而为您提供客户端正在处理视频的字节/秒。

【讨论】：

现在已经是 2015 年了，对此方法或其他方法有什么更新吗？谢谢

【参考方案3】：

如需更多最新答案：MPEG-DASH 正在替换 HLS。 HLS 主要用于 ios 领域。大多数桌面浏览器不打算支持它，而 DASH 是他们正在朝着的标准。 （但是，有很多播放器旨在让您将 HLS 与 hls.js 之类的 HTML5 视频播放器一起使用）。 DASH 播放器包括 Bitmovin、Google Shaka 等。目前许多人同时为 HLS 和 DASH 进行编码。 HLS 还支持分段 mp4。请注意，您需要在服务器端正确编码您的视频。附加资源：http://www.streamingmedia.com/Articles/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-2016-110099.aspx

【参考方案4】：

我讨厌那个功能！这通常是错误的，如果我想等待 2 小时来加载我的 dang 视频，那就等吧！如果不向用户发送一个大的虚拟文件并测量到达他所花费的时间，就没有可靠的方法来准确测量这一点。

您应该依靠用户输入（并正确记住它！这与 YouTube 不同！）。

简而言之，不要以 YouTube 为例。

【讨论】：

但如果您在播放过程中连接速度变慢，您肯定希望视频暂时自动切换到较低带宽的流，而不是让您的播放中断。没有？

@DanHerbert：如果切换是阻塞的，通常是这样（视频的质量急剧下降，通常会导致任何先前的缓冲区陷入困境，这意味着您无法正确倒带）。不。如果用户想这样做，他会自己做，相信我。只需使质量更改选项足够可见和清晰。并非所有事情都必须是自动的。

通过自动质量选择的用户体验有时比视频质量更重要，例如 Netflix 和 YouTube 就是这样做的。对于录制的讲座或无法以低质量阅读的内容，最好让用户等待 HQ 视频加载。

Why not both?：一个“自动”选项，它将根据带宽自动检测和调整视频质量，以及选择“720p”、“1080p”、“4K”等的选项，以及在这些情况下，即使用户必须等待视频缓冲，也要坚持分辨率。

@JoshPowlison 因为答案是在 2012 年写的，当时技术还不够成熟 :)

【参考方案5】：

有些付费服务可能会告诉您对方使用的带宽，例如netspeed。

数据的准确性可能对你来说已经足够了，但我还没有机会亲自测试。

【讨论】：

我查看了网速...这是一个指标，但它真的很粗略，它只​​显示“Cable/DSL”、“拨号”、“移动”等。

是的，特征检测和缓冲速度监控将是最好的选择:)