HLS视频流：它是什么，以及何时使用它

In this short article I will focus on HLS, the most extended adaptive bitrate protocol for video delivery. I'll answer some of the main questions that anyone considering HLS for the first time will likely ask: what it is, when to use it, and how to use it.

在这篇简短的文章中，我将重点介绍HLS，这是用于视频传递的最扩展的自适应比特率协议。 我将回答一些首次考虑HLS的人可能会问的一些主要问题：它是什么，何时使用以及如何使用。

To help along the way, I will show some examples using an online video publishing tool that you can freely use to test out the performance of HLS on your own.

为了提供帮助，我将使用在线视频发布工具显示一些示例，您可以*使用它们来自行测试HLS的性能。

什么是HLS，它如何工作？ (What is HLS and how does it work?)

HLS is a protocol defined by Apple to implement an adaptive bitrate streaming format that can be supported on their devices and software. Over the time, it has gained widespread support.

HLS是Apple定义的一种协议，用于实现一种可在其设备和软件上支持的自适应比特率流格式。 随着时间的流逝，它得到了广泛的支持。

The most important feature of HLS is its ability to adapt the bitrate of the video to the actual speed of the connection. This optimizes the quality of the experience.

HLS的最重要特征是其能够使视频的比特率适应实际的连接速度。 这样可以优化体验质量。

HLS videos are encoded in different renditions at different resolutions and bitrates. This is usually referred to as the bitrate ladder. When a connection gets slower, the protocol automatically adjusts the requested bitrate to the bandwidth available.

HLS视频以不同的分辨率和比特率以不同的格式进行编码。 这通常称为比特率阶梯。 当连接变慢时，协议会自动将请求的比特率调整为可用带宽。

Compared to progressive videos, HLS avoids re-buffering and stalling effects as well as bloating the client connection. We can see it at work in this video.

与渐进式视频相比，HLS避免了重新缓冲和拖延效果，并且避免了客户端连接的膨胀。 我们可以在此视频中看到它。

In essence, HLS provides a much better user experience when we use video content in our apps or sites.

本质上，当我们在应用程序或网站中使用视频内容时，HLS可提供更好的用户体验。

It has native support in iOS and Android. It is also supported by Safari, and by using some JavaScript it is supported in all the main browsers (Chrome, Firefox, Edge). While using HLS requires some effort, it's not a big deal.

它在iOS和Android中具有本机支持。 Safari也支持它，并且通过使用某些JavaScript，所有主要浏览器(Chrome，Firefox，Edge)都支持它。 尽管使用HLS需要付出一些努力，但这并不重要。

Let's see when we should use it and how.

让我们看看何时应该使用它以及如何使用它。

我们什么时候应该使用HLS？ (When should we use HLS?)

There are cases where videos are not that heavy. For instance, you could have a sequence of images encoded as a 1-2 seconds video, with a weight of less than 1 MB. In this case, a progressive video – that can be consumed, like an image, using plain HTML5 – is for sure the best option. HLS does not offer any advantage here.

在某些情况下，视频的效果并不那么好。 例如，您可以将一系列图像编码为1-2秒的视频，并且权重小于1 MB。 在这种情况下，渐进式视频(可以使用纯HTML5像图像一样消费)无疑是最佳选择。 HLS在这里没有任何优势。

But, HLS does make sense when we want to deliver high resolution videos (HD or over) with a weight over 3MB. This type of content may kill our web UX when viewed on an average mobile connection.

但是，当我们要提供重量超过3MB的高分辨率视频(HD或以上)时，HLS确实有意义。 在一般的移动连接上查看时，此类内容可能会杀死我们的Web UX。

It's worth noting that this is the case in an increasing amount of media content, including many short videos of less than 20 seconds used in ecommerce and marketing contexts. In the example at the beginning of the post, we have a full HD video of only 9 seconds that weights in at over 6MB.

值得注意的是，越来越多的媒体内容就是这种情况，包括许多在电子商务和营销环境中使用的少于20秒的短视频。 在文章开头的示例中，我们只有9秒的完整高清视频，其重量超过6MB。

我们如何在我们的站点中使用HLS？ (How can we use HLS in our sites?)

To use HLS we have to address a number of aspects. I'll focus on two important points:  

要使用HLS，我们必须解决许多方面的问题。 我将重点介绍两个要点：

• the need to encode the video, and,
  需要对视频进行编码，并且，
• the need to embed it in our page.
  需要将其嵌入到我们的页面中。

For a more comprehensive view on what a general video publishing pipeline entails, you may check out this post.

有关一般视频发布管道需要什么的更全面的了解，您可以查看这篇文章 。

HLS编码 (HLS encoding)

We can encode videos in HLS in-house or by using a third party service. To build an in-house encoder, the best option is to use FFMPEG, a powerful open source library for video processing and encoding. In this case, we should analyse the content we are going to encode and set a number of parameters.

我们可以在内部或通过第三方服务在HLS中对视频进行编码。 要构建内部编码器，最好的选择是使用FFMPEG，这是用于视频处理和编码的功能强大的开源库。 在这种情况下，我们应该分析我们要编码的内容并设置许多参数。

In HLS we should define a bitrate ladder (the bitrates and resolutions of each step) and the length of chunks. When we encode a video, we end with a set of playlists and chunks. Typically, we end the former with .m3u8 and the latter with .ts extensions. We can see an example in the next image.

在HLS中，我们应该定义一个比特率阶梯(每个步骤的比特率和分辨率)和块的长度。 在对视频进行编码时，我们以一组播放列表和块结尾。 通常，我们以.m3u8结尾，而以.ts扩展名结尾。 我们可以在下一张图片中看到一个示例。

We can see one master playlist, one additional playlist per rendition, and all the chunks of each rendition. The master playlist specifies the bitrate ladder and the relative path to each rendition.

我们可以看到一个主播放列表，每个格式副本一个附加的播放列表，以及每个格式副本的所有块。 主播放列表指定比特率阶梯和每个演绎的相对路径。

Apple makes a generic recommendation specifying the bitrate ladder and a chunk duration of 10 seconds.  However, this is not very useful for many types of content, like the short videos common in ecommerce and marketing.

Apple提出通用建议，指定比特率阶梯和10秒的块持续时间。 但是，这对于许多类型的内容不是很有用，例如电子商务和市场营销中常见的短视频。

In fact, the best approach is to tune the bitrate ladder specifically to the content of the video. In this case, if you want to make the most of HLS and you're not expert in encoding, a third party service providing per-title encoding (with HLS) is likely the right choice.

实际上，最好的方法是专门针对视频内容调整比特率阶梯。 在这种情况下，如果您想充分利用HLS而又不是编码专家，那么提供按标题编码(带有HLS)的第三方服务可能是正确的选择。

HLS播放器 (HLS players)

Here, we find two main options. We can stick to the HTML5 player or we can use one implemented in JavaScript.

在这里，我们找到两个主要选项。 我们可以坚持使用HTML5播放器，也可以使用以JavaScript实现的播放器。

HTML5播放器 (HTML5 player )

Recent Safari versions support HLS. In this case, you may use HLS playlists in the same manner as progressive videos. With other browsers, you may use a tiny JavaScript library to implement the HLS protocol and again use the HTML5 player for progressive videos.

近期的Safari版本支持HLS。 在这种情况下，您可以以与渐进式视频相同的方式使用HLS播放列表。 在其他浏览器上，您可以使用一个很小JavaScript库来实现HLS协议，然后再次使用HTML5播放器来播放渐进式视频。

This can be done with HLS.js. This library just implements the negotiation of renditions, based on the available bandwidth. Support is almost universal, only conditional on the support of the media element's API.

可以使用HLS.js完成。 该库仅基于可用带宽来实现移交的协商。 支持几乎是通用的，仅取决于对媒体元素的API的支持。

JavaScript播放器 (JavaScript Player)

In case we need to customise the video experience – which is pretty common in marketing and stories pages – then we need to use something other than the default HTML5 player.

如果我们需要自定义视频体验(这在市场营销和故事页面中很常见)，那么我们需要使用默认HTML5播放器以外的其他功能。

While there are many commercial options out there, Video.js is a good choice. It's an open source player that supports a high degree of customization, including different skins and controls.

尽管有很多商业选择，但是Video.js是一个不错的选择。 这是一个开源播放器，支持高度的自定义，包括不同的外观和控件。

A player like Video.js also supports the tracking of video-related events (like play or pause actions) so we can include them in our own analytics. In fact, including these data in our Google Analytics is really easy.

Video.js之类的播放器还支持跟踪与视频相关的事件(例如播放或暂停动作)，因此我们可以将其包含在我们自己的分析中。 实际上，将这些数据包含在我们的Google Analytics(分析)中确实很容易。

摘要 (Summary)

I've tackled the first questions about HLS that most potential users will have: what it is, and when we should use it.

我已经解决了大多数潜在用户将遇到的有关HLS的第一个问题：它是什么以及何时使用它。

While a video publishing pipeline reliant on HLS can be implemented and deployed in-house with open source tools like FFMPEG and video.js, it may be a good idea to use a video publishing service if you're not an expert in the tech. They bring advanced features like per-title encoding, take care of all the hard work, and let us focus on our customization needs.

尽管可以使用FFMPEG和video.js之类的开源工具在内部实现和部署依赖于HLS的视频发布管道，但如果您不是该领域的专家，则最好使用视频发布服务 。 它们带来了高级功能，例如按标题编码，照顾所有辛苦的工作，并让我们专注于定制需求。

翻译自: https://www.freecodecamp.org/news/what-is-hls-and-when-to-use-it/