20

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

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

4

5 回答 5

5

根据您使用的播放器和编码平台，您可能可以对视频使用 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/

于 2015-12-20T22:36:02.453 回答
4

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

webkitVideoDecodedByteCount: 0
webkitAudioDecodedByteCount: 0

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

于 2012-07-04T15:31:44.303 回答
2

如需更新的答案：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

于 2016-12-07T01:19:50.800 回答
0

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

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

总之，不要以 YouTube 为例。

于 2012-07-04T15:28:25.280 回答
0

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

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

于 2012-07-04T15:33:44.433 回答