javascript HTML5 视频：检测带宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11331907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video: Detecting Bandwidth
提问by bbeckford
I have a 1080p video that I'm displaying in an HTML5 <video>tag on my page.
我有一个 1080p 视频，显示在<video>我页面上的 HTML5标签中。
Is there a simple(ish) javascript method of detecting bandwidth so I can switch out the video for lower quality versions if the user's connection is too slow to stream the video? Similar to the logic behind YouTube's 'auto' video size chooser.
是否有一种简单的（ish）javascript 方法来检测带宽，因此如果用户的连接速度太慢而无法流式传输视频，我可以将视频切换为较低质量的版本？类似于 YouTube 的“自动”视频大小选择器背后的逻辑。
回答by droider
Depending on what player and encoding platform you are using you may be able to use HLS encoding for your videos. HLS stands for HTTP Live Streaming, a protocol developed by Apple for primarily solving this problem (among others).
根据您使用的播放器和编码平台，您可以对视频使用 HLS 编码。HLS 代表 HTTP Live Streaming，这是 Apple 开发的一种协议，主要用于解决此问题（以及其他问题）。
HLS basically breaks your video file into multiple small files so they can be "pseudo" streamed using a simple Web server. With HLS you can also encode in multiple resolutions and a player might be able to switch to a lower or higher bandwidth.
HLS 基本上将您的视频文件分解为多个小文件，这样它们就可以使用简单的 Web 服务器进行“伪”流式传输。使用 HLS，您还可以以多种分辨率进行编码，并且播放器可能能够切换到更低或更高的带宽。
The only downside is that most of the players use Flash to play HLS encoded content. Check it out in action here: http://www.flashls.org/latest/examples/chromeless/
唯一的缺点是大多数播放器使用 Flash 来播放 HLS 编码的内容。在这里查看它的实际效果：http: //www.flashls.org/latest/examples/chromeless/
Here's HLS demo for flowplayer: http://demos.flowplayer.org/basics/hls.html
这是 flowplayer 的 HLS 演示：http://demos.flowplayer.org/basics/hls.html
And here is a plugin for VideoJS: https://github.com/videojs/videojs-contrib-hls
这是 VideoJS 的插件：https: //github.com/videojs/videojs-contrib-hls
To encode in HLS, you can either use ffmpeg for free and upload files to your server: https://www.ffmpeg.org/ffmpeg-formats.html#hls-1
要在 HLS 中编码，您可以免费使用 ffmpeg 并将文件上传到您的服务器：https: //www.ffmpeg.org/ffmpeg-formats.html#hls-1
Or, you can use a cloud-based solution like AWS Transcoder or Brightcove https://aws.amazon.com/elastictranscoder/
或者，您可以使用基于云的解决方案，例如 AWS Transcoder 或 Brightcove https://aws.amazon.com/elastictranscoder/
回答by Esailija
In google chrome at least there are these properties on a video element:
在谷歌浏览器中，至少在视频元素上有这些属性：
webkitVideoDecodedByteCount: 0
webkitAudioDecodedByteCount: 0
These should be enough to determine how fast the client can decode the video. As the video plays you would keep track of the delta amount of these bytes which gives you bytes/s the client is processing the video.
这些应该足以确定客户端解码视频的速度。在视频播放时，您将跟踪这些字节的增量数量，这为您提供了客户端正在处理视频的字节数/秒。
回答by Fawntasia
For a more up to date answer: MPEG-DASH is in the process of replacing HLS. HLS is used mainly in iOS land. Most desktop browsers do not plan to support it, and DASH is the standard they are moving toward. (However, there are plenty of players designed to allow you to use HLS with HTML5 video player like hls.js). DASH players include Bitmovin, Google Shaka, and more. Many people encode for both HLS and DASH currently. HLS also supports fragmented mp4. Please note that you will need to encode your videos correctly server side. Additional resource: http://www.streamingmedia.com/Articles/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-2016-110099.aspx
有关更新的答案：MPEG-DASH 正在取代 HLS。HLS 主要用于 iOS 领域。大多数桌面浏览器不打算支持它，而 DASH 是他们正在朝着的标准。（但是，有很多播放器旨在允许您将 HLS 与 HTML5 视频播放器（如 hls.js）一起使用）。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
回答by Ja?ck
回答by Madara's Ghost
I hate that feature! It's usually wrong, and if I want to wait 2 hours to load my dang video, than wait I shall! There's no reliable way to accurately measure this without sending a large dummy file to the user and measure the time it took to get to him.
我讨厌那个功能！这通常是错误的，如果我想等 2 个小时来加载我的 dang 视频，那我就等着吧！如果不向用户发送一个大的虚拟文件并测量到达他所需的时间，就没有可靠的方法来准确地测量这一点。
You should count on user input (and remember it correctly! Also unlike YouTube!).
您应该依靠用户输入（并正确记住它！也不同于 YouTube！）。
In short, don't take YouTube as an example.
总之，不要以 YouTube 为例。
回答by Gernot
Till now, you would have to have your content available in MPEG-DASH and HLS to provide a broad support of all the platforms out there. HLS supports fragmented MP4 by now, you are able to use one single output format, which plays on every device. Further, you need 50% less storage, and as fMP4 is more storage efficient than MPEG-TS, which is used for HLS at the moment, you can save even more storage and bandwidth.
到目前为止，您必须在 MPEG-DASH 和 HLS 中提供您的内容，以提供对所有平台的广泛支持。HLS 现在支持分段 MP4，您可以使用一种单一的输出格式，可以在每台设备上播放。此外，您需要的存储空间减少 50%，并且由于 fMP4 的存储效率高于目前用于 HLS 的 MPEG-TS，您可以节省更多的存储空间和带宽。
Bitmovin provides a examplehow to create HLS fMP4 content and how to play it.
Bitmovin 提供了如何创建 HLS fMP4 内容以及如何播放它的示例。
