javascript - HTML5 视频 : Detecting Bandwidth

Question

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

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

Answer 1

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

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/