Streaming de vídeo HLS: o que é e quando usá-lo

Neste breve artigo, vou me concentrar no HLS, o protocolo de taxa de bits adaptável mais estendido para entrega de vídeo. Vou responder a algumas das principais perguntas que qualquer pessoa que esteja considerando o HLS pela primeira vez provavelmente fará: o que é, quando usá-lo e como usá-lo.

Para ajudar ao longo do caminho, mostrarei alguns exemplos usando uma ferramenta de publicação de vídeo online que você pode usar gratuitamente para testar o desempenho do HLS por conta própria.

O que é HLS e como funciona?

HLS é um protocolo definido pela Apple para implementar um formato de streaming de taxa de bits adaptável que pode ser compatível com seus dispositivos e software. Com o tempo, ganhou amplo apoio.

A característica mais importante do HLS é sua capacidade de adaptar a taxa de bits do vídeo à velocidade real da conexão. Isso otimiza a qualidade da experiência.

Os vídeos HLS são codificados em diferentes versões em diferentes resoluções e taxas de bits. Isso geralmente é conhecido como escada de taxa de bits. Quando uma conexão fica mais lenta, o protocolo ajusta automaticamente a taxa de bits solicitada para a largura de banda disponível.

Comparado aos vídeos progressivos, o HLS evita o re-buffering e os efeitos de travamento, além de aumentar a conexão do cliente. Podemos ver isso em ação neste vídeo.

Em essência, o HLS oferece uma experiência de usuário muito melhor quando usamos conteúdo de vídeo em nossos aplicativos ou sites.

Possui suporte nativo em iOS e Android. Também é compatível com Safari e, usando algum JavaScript, é compatível com todos os navegadores principais (Chrome, Firefox, Edge). Embora o uso do HLS exija algum esforço, não é grande coisa.

Vamos ver quando devemos usá-lo e como.

Quando devemos usar o HLS?

Há casos em que os vídeos não são tão pesados. Por exemplo, você pode ter uma sequência de imagens codificadas como um vídeo de 1-2 segundos, com peso inferior a 1 MB. Nesse caso, um vídeo progressivo - que pode ser consumido, como uma imagem, usando HTML5 puro - é com certeza a melhor opção. HLS não oferece nenhuma vantagem aqui.

Mas, HLS faz sentido quando queremos entregar vídeos de alta resolução (HD ou superior) com um peso acima de 3 MB. Esse tipo de conteúdo pode matar nossa experiência do usuário na web quando visualizado em uma conexão móvel comum.

É importante notar que este é o caso em uma quantidade crescente de conteúdo de mídia, incluindo muitos vídeos curtos de menos de 20 segundos usados ​​em contextos de comércio eletrônico e marketing. No exemplo no início da postagem, temos um vídeo full HD de apenas 9 segundos que pesa mais de 6 MB.

Como podemos usar o HLS em nossos sites?

Para usar o HLS, temos que abordar vários aspectos. Vou me concentrar em dois pontos importantes:  

  • a necessidade de codificar o vídeo, e,
  • a necessidade de incorporá-lo em nossa página.

Para uma visão mais abrangente sobre o que envolve um pipeline geral de publicação de vídeo, você pode verificar este post.

Codificação HLS

Podemos codificar vídeos em HLS internamente ou usando um serviço de terceiros. Para construir um codificador interno, a melhor opção é usar FFMPEG, uma poderosa biblioteca de código aberto para processamento e codificação de vídeo. Nesse caso, devemos analisar o conteúdo que vamos codificar e definir uma série de parâmetros.

Em HLS, devemos definir uma escada de taxa de bits (as taxas de bits e resoluções de cada etapa) e o comprimento dos pedaços. Quando codificamos um vídeo, terminamos com um conjunto de playlists e partes. Normalmente, terminamos o primeiro com .m3u8 e o último com extensões .ts. Podemos ver um exemplo na próxima imagem.

Podemos ver uma lista de reprodução mestre, uma lista de reprodução adicional por execução e todos os pedaços de cada execução. A lista de reprodução principal especifica a escala de taxa de bits e o caminho relativo para cada versão.

A Apple faz uma recomendação genérica especificando a escada de taxa de bits e uma duração de bloco de 10 segundos. No entanto, isso não é muito útil para muitos tipos de conteúdo, como os vídeos curtos comuns em comércio eletrônico e marketing.

Na verdade, a melhor abordagem é ajustar a escada de taxa de bits especificamente para o conteúdo do vídeo. Nesse caso, se você deseja aproveitar ao máximo o HLS e não é especialista em codificação, um serviço de terceiros que fornece codificação por título (com HLS) é provavelmente a escolha certa.

Jogadores HLS

Aqui, encontramos duas opções principais. Podemos ficar com o player HTML5 ou podemos usar um implementado em JavaScript.

Player HTML5

As versões recentes do Safari suportam HLS. Nesse caso, você pode usar listas de reprodução HLS da mesma maneira que vídeos progressivos. Com outros navegadores, você pode usar uma pequena biblioteca JavaScript para implementar o protocolo HLS e, novamente, usar o player HTML5 para vídeos progressivos.

Isso pode ser feito com HLS.js. Esta biblioteca apenas implementa a negociação de rendições, com base na largura de banda disponível. O suporte é quase universal, apenas condicionado ao suporte da API do elemento de mídia.

JavaScript Player

No caso de precisarmos personalizar a experiência de vídeo - o que é bastante comum em páginas de marketing e histórias -, precisamos usar algo diferente do player HTML5 padrão.

Embora existam muitas opções comerciais por aí, Video.js é uma boa escolha. É um player de código aberto que suporta um alto grau de personalização, incluindo diferentes skins e controles.

Um player como Video.js também oferece suporte ao rastreamento de eventos relacionados ao vídeo (como ações de reprodução ou pausa) para que possamos incluí-los em nossas próprias análises. Na verdade, incluir esses dados em nosso Google Analytics é muito fácil.

Resumo

Abordei as primeiras perguntas sobre o HLS que a maioria dos usuários em potencial terá: o que é e quando devemos usá-lo.

Embora um pipeline de publicação de vídeo dependente de HLS possa ser implementado e implantado internamente com ferramentas de código aberto como FFMPEG e video.js, pode ser uma boa ideia usar um serviço de publicação de vídeo se você não for um especialista na tecnologia. Eles trazem recursos avançados, como codificação por título, cuidam de todo o trabalho árduo e permitem que nos concentremos em nossas necessidades de personalização.