我在网页上使用HTML5的<video>标签播放一段1080p的视频。
是否有一个简单（至少较为简单）的JavaScript方法来检测带宽，以便如果用户的连接速度过慢无法流畅播放视频，我可以将其替换为低质量版本? 类似于YouTube的“自动”视频尺寸选择器背后的逻辑。
HTML5视频：检测带宽
20
- bbeckford
2
5个回答
5
根据您使用的播放器和编码平台，您可以使用HLS编码来处理视频。HLS代表HTTP直播流，这是苹果为主要解决此问题（以及其他问题）而开发的协议。
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/
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/
- droider
2
2
videojs-contrib-hls: "该项目通过为支持媒体源扩展或支持Flash的浏览器提供HLS的polyfill来解决这种情况。您可以部署单个HLS流，针对常规HTML5视频API进行编码，并在所有大型Web设备类别上创建快速、高质量的视频体验。" 太棒了！正是我需要的！非常感谢！ - That Brazilian Guy对于一个与播放器无关的HLS客户端，请尝试由DailyMotion介绍的hls.js。videojs-contrib-hls与video.js绑定在一起。 - Fawntasia
4
至少在 Google Chrome 中，视频元素有以下属性：
webkitVideoDecodedByteCount: 0
webkitAudioDecodedByteCount: 0
这些应该足以确定客户端解码视频的速度。随着视频的播放，您将跟踪这些字节的差值量，这将给出客户端处理视频的字节/秒。
- Esailija
1
2这个方法还有更新吗？或者现在有其他的方法了吗？谢谢。 - Sarsaparilla
2
更多更新的答案：MPEG-DASH正在取代HLS。HLS主要用于iOS平台。大多数桌面浏览器不打算支持它，而DASH是他们正在转向的标准。（但是，有很多播放器设计允许您使用像hls.js这样的HTML5视频播放器使用HLS）。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
- Fawntasia
0
我讨厌那个功能！它通常是错的，如果我想要等待2个小时才能加载我的视频，那么我就会等！没有可靠的方法可以准确地测量这一点，除非向用户发送一个大的虚拟文件并测量到达他的时间。
你应该依赖用户输入（并正确记住它！与YouTube不同！）。
简而言之，不要以YouTube为榜样。
- Madara's Ghost
5
1但是如果您在播放过程中连接速度变慢，您肯定希望视频能自动切换到较低带宽的流，而不是让播放中断。不是吗？ - Dan Herbert
@DanHerbert：如果切换是障碍的，那么通常情况下就不会切换（视频的质量会急剧下降，通常会导致之前的缓存消失，这意味着您无法正确倒回）。不，如果用户想要做到，他会自己做到，相信我。只需使质量更改选项可见并清晰即可。并非所有内容都必须是自动的。 - Madara's Ghost
自动选择视频质量对用户体验的影响有时比视频质量本身更为重要，例如 Netflix 和 YouTube 所采用的方式。对于录制的讲座或者不能以低清晰度观看的内容，最好允许用户等待高清晰度视频加载完成。 - boxmein
为什么不两者兼备呢？：添加一个“自动”选项，它可以根据带宽自动检测和调整视频质量，并添加选择“720p”、“1080p”、“4K”等选项，在这种情况下即使用户必须等待视频缓冲，也会保持分辨率。 - Josh Powlison
1@JoshPowlison 因为这个答案是在2012年编写的，当时技术还不够成熟 :) - Madara's Ghost
0
有些付费服务可以提供对方所在带宽的指示，例如netspeed。
这些数据的准确性可能已经足够了，但我自己还没有测试过。
- Ja͢ck
2
我研究了netspeed...它是一个指示器，但它非常粗略，只能显示“Cable/DSL”，“Dialup”，“Mobile”等。 - schieferstapel
是的，特征检测和缓冲速度监控将是最佳选择 :) - Ja͢ck
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
srcset的东西来处理视频？这将解决90%的情况，用户从手机加载视频... - benzkji