O que é HLS?

Joseph Grabski

Líder de conteúdo · Rochester, Reino Unido · Mostrar biografia

HLS significa HTTP Live Streaming. É um protocolo de streaming com taxa de bits adaptativa para transmitir áudio e vídeo ao vivo e sob demanda por HTTP. Este guia explica suas playlists, seus segmentos de mídia, a alternância de qualidade e como gerar um fluxo HLS com a Transloadit.

O que é streaming?

O streaming permite reproduzir áudio ou vídeo enquanto mais conteúdo chega, seja ele ao vivo ou pré-gravado. O download progressivo também pode iniciar a reprodução antes que o download de um arquivo termine. O HLS acrescenta playlists e entrega segmentada, permitindo que o reprodutor escolha entre os níveis de qualidade disponíveis à medida que busca o conteúdo.

O que significa HLS?

A sigla HLS significa HTTP Live Streaming. A Apple desenvolveu o HLS, e o protocolo está documentado publicamente na RFC 8216⁠. Ele usa a entrega HTTP convencional, então os fluxos podem ser servidos por servidores web e distribuídos por CDNs. O HLS oferece suporte tanto a transmissões ao vivo quanto a vídeos pré-gravados sob demanda.

Como o HLS funciona?

Antes que um vídeo possa ser transmitido usando HLS, um fluxo de trabalho de empacotamento geralmente executa três etapas:

1. Codificar a fonte em várias variantes, como diferentes resoluções e taxas de bits. As escolhas de codec e contêiner dependem dos dispositivos aos quais você precisa oferecer suporte; a especificação atual de criação de conteúdo HLS⁠ da Apple lista seus requisitos de reprodução.
2. Dividir cada variante em segmentos de mídia. A duração dos segmentos é declarada na playlist, em vez de ser fixada pelo protocolo HLS.
3. Criar uma playlist de mídia para cada variante e uma playlist multivariante que descreva os fluxos disponíveis.

O reprodutor lê a playlist multivariante, escolhe uma variante e carrega sua playlist de mídia para encontrar os segmentos. Conforme as condições da rede mudam, ele pode solicitar os próximos segmentos de uma variante com taxa de bits maior ou menor. Conteúdo e marcações de tempo correspondentes entre as variantes, com limites de segmentos alinhados, ajudam a tornar a alternância suave.

O diagrama abaixo ilustra como a qualidade da imagem pode variar conforme a conexão de rede oscila.

Áudio e vídeo podem compartilhar segmentos ou usar representações separadas. O HLS também pode oferecer idiomas de áudio alternativos, legendas e legendas descritivas; os metadados das playlists descrevem as opções disponíveis.

Qual é a diferença entre HLS e MPEG-DASH?

Assim como o HLS, o MPEG-DASH descreve mídia segmentada e permite que o reprodutor alterne entre variantes de forma adaptativa. As diferenças mais úteis estão nos manifestos, nas especificações e nos ecossistemas de reprodução, e não em regras fixas de codec ou duração de segmentos.

Ambos os formatos podem oferecer reprodução com taxa de bits adaptativa, criptografia, legendas descritivas, áudio alternativo e entrega ao vivo ou sob demanda. Escolha com base nos reprodutores de destino, nos recursos necessários e no stack de empacotamento.

A Transloadit oferece suporte a HLS?

O Robot /video/adaptive da Transloadit oferece suporte tanto a HLS quanto a MPEG-DASH. A demonstração de HLS mantida EN (English) abaixo mostra um Template que codifica um vídeo em três níveis de qualidade e depois os empacota em segmentos de mídia e playlists .m3u8. Você pode entregar esses arquivos por HTTP usando uma CDN.

<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i --save @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
  rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // It's often better store encoding instructions in your account
          // and use a `template_id` instead of adding these steps inline
          steps: {
            ':original': {
              robot: '/upload/handle',
            },
            low: {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'hls-270p',
              turbo: true,
            },
            mid: {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'hls-360p',
              turbo: true,
            },
            high: {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'hls-540p',
              turbo: true,
            },
            adaptive: {
              use: {
                steps: ['low', 'mid', 'high'],
                bundle_steps: true,
              },
              robot: '/video/adaptive',
              playlist_name: 'my_playlist.m3u8',
              technique: 'hls',
            },
            exported: {
              use: ['adaptive', ':original'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              path: 'hlsdemo/${file.meta.relative_path}/${file.name}',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to `waitForEncoding:true` this is fired after encoding is done.
      // Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`
      console.log(transloadit) // Array of Assembly Statuses
      for (const assembly of transloadit) {
        console.log(assembly.results) // Array of all encoding results
      }
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

O reprodutor e as listagens de playlists abaixo usam uma codificação local de surf.mp4 da demonstração, feita com o FFmpeg 9.0.2, com vídeo H.264 Main a 30 fps e áudio AAC-LC. Quando você executar o Template da Transloadit acima, os nomes dos arquivos e os valores de saída poderão ser diferentes dos desta ilustração.

my_playlist.m3u8 é uma playlist multivariante, chamada de playlist mestre na RFC 8216. Cada entrada #EXT-X-STREAM-INF descreve a largura de banda, a resolução e os codecs de uma variante. A URI seguinte aponta para sua playlist de mídia. Aqui, mp4a.40.2 identifica o áudio AAC-LC.

my_playlist.m3u8

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-STREAM-INF:BANDWIDTH=648976,AVERAGE-BANDWIDTH=625791,RESOLUTION=480x270,CODECS="avc1.4d4015,mp4a.40.2"
480x270/480x270_534648_30.m3u8

#EXT-X-STREAM-INF:BANDWIDTH=1062876,AVERAGE-BANDWIDTH=1022628,RESOLUTION=640x360,CODECS="avc1.4d401e,mp4a.40.2"
640x360/640x360_981616_30.m3u8

#EXT-X-STREAM-INF:BANDWIDTH=1680720,AVERAGE-BANDWIDTH=1618705,RESOLUTION=960x540,CODECS="avc1.4d401f,mp4a.40.2"
960x540/960x540_1567376_30.m3u8

960x540_1567376_30.m3u8

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-INDEPENDENT-SEGMENTS
#EXTINF:10.000000,
seg__0.ts
#EXTINF:10.000000,
seg__1.ts
#EXTINF:1.966667,
seg__2.ts
#EXT-X-ENDLIST

Esta playlist de mídia lista segmentos MPEG-TS na ordem de reprodução. Cada #EXTINF informa a duração do segmento seguinte em segundos: aqui, 10, 10 e 1,966667. São durações, e não marcações de tempo ou instruções para alternar a qualidade; o reprodutor faz essa escolha.

#EXT-X-TARGETDURATION:10 define o limite superior para as durações dos segmentos arredondadas para o segundo inteiro mais próximo. O segmento final pode ser mais curto. #EXT-X-PLAYLIST-TYPE:VOD indica uma playlist sob demanda que não muda, e #EXT-X-ENDLIST informa que nenhum outro segmento será adicionado. Essas são tags de playlist de mídia e não devem estar na playlist multivariante.

Para concluir

Experimente a demonstração de HLS EN (English) ou crie uma conta na Transloadit para criar um Template de streaming adaptativo.