HTML5 视频:检测带宽 [英] HTML5 Video: Detecting Bandwidth

查看:44
本文介绍了HTML5 视频:检测带宽的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 1080p 视频,我在页面上的 HTML5 <video> 标签中显示该视频.

I have a 1080p video that I'm displaying in an HTML5 <video> tag on my page.

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

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.

推荐答案

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

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 基本上将您的视频文件分成多个小文件,这样它们就可以使用简单的 Web 服务器进行伪"流式传输.使用 HLS,您还可以以多种分辨率进行编码,并且播放器可能能够切换到更低或更高的带宽.

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.

唯一的缺点是大多数播放器使用 Flash 来播放 HLS 编码的内容.在这里查看它的实际效果:http://www.flashls.org/latest/examples/chromeless/

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/

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

Here's HLS demo for flowplayer: http://demos.flowplayer.org/basics/hls.html

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

And here is a plugin for VideoJS: https://github.com/videojs/videojs-contrib-hls

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

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

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

Or, you can use a cloud-based solution like AWS Transcoder or Brightcove https://aws.amazon.com/elastictranscoder/

这篇关于HTML5 视频:检测带宽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆