Streaming vidéo HLS: qu'est-ce que c'est et quand l'utiliser

Dans ce court article, je me concentrerai sur HLS, le protocole de débit adaptatif le plus étendu pour la diffusion vidéo. Je répondrai à certaines des principales questions que quiconque envisagera de HLS pour la première fois se posera probablement: qu'est-ce que c'est, quand l'utiliser et comment l'utiliser.

Pour vous aider, je vais montrer quelques exemples d'utilisation d'un outil de publication vidéo en ligne que vous pouvez utiliser librement pour tester vous-même les performances de HLS.

Qu'est-ce que HLS et comment ça marche?

HLS est un protocole défini par Apple pour implémenter un format de streaming à débit adaptatif qui peut être pris en charge sur leurs appareils et logiciels. Au fil du temps, il a gagné un large soutien.

La caractéristique la plus importante de HLS est sa capacité à adapter le débit binaire de la vidéo à la vitesse réelle de la connexion. Cela optimise la qualité de l'expérience.

Les vidéos HLS sont encodées dans différents rendus à différentes résolutions et débits binaires. Ceci est généralement appelé échelle de débit binaire. Lorsqu'une connexion ralentit, le protocole ajuste automatiquement le débit demandé à la bande passante disponible.

Par rapport aux vidéos progressives, HLS évite la remise en mémoire tampon et les effets de blocage ainsi que le gonflement de la connexion client. Nous pouvons le voir à l'œuvre dans cette vidéo.

En substance, HLS offre une bien meilleure expérience utilisateur lorsque nous utilisons du contenu vidéo dans nos applications ou sites.

Il prend en charge nativement iOS et Android. Il est également pris en charge par Safari, et en utilisant du JavaScript, il est pris en charge dans tous les principaux navigateurs (Chrome, Firefox, Edge). Bien que l'utilisation de HLS nécessite un certain effort, ce n'est pas un gros problème.

Voyons quand nous devrions l'utiliser et comment.

Quand devrions-nous utiliser HLS?

Il y a des cas où les vidéos ne sont pas si lourdes. Par exemple, vous pouvez avoir une séquence d'images encodées sous forme de vidéo de 1 à 2 secondes, avec un poids inférieur à 1 Mo. Dans ce cas, une vidéo progressive - qui peut être consommée, comme une image, en utilisant du HTML5 ordinaire - est certainement la meilleure option. HLS n'offre aucun avantage ici.

Mais, HLS a du sens lorsque nous voulons fournir des vidéos haute résolution (HD ou plus) avec un poids supérieur à 3 Mo. Ce type de contenu peut tuer notre UX Web lorsqu'il est visualisé sur une connexion mobile moyenne.

Il convient de noter que c'est le cas dans une quantité croissante de contenu multimédia, y compris de nombreuses vidéos courtes de moins de 20 secondes utilisées dans des contextes de commerce électronique et de marketing. Dans l'exemple au début de l'article, nous avons une vidéo Full HD de seulement 9 secondes qui pèse plus de 6 Mo.

Comment pouvons-nous utiliser HLS dans nos sites?

Pour utiliser HLS, nous devons aborder un certain nombre d'aspects. Je vais me concentrer sur deux points importants:  

  • la nécessité d'encoder la vidéo, et,
  • la nécessité de l'intégrer dans notre page.

Pour une vue plus complète de ce qu'implique un pipeline de publication vidéo générale, vous pouvez consulter cet article.

Encodage HLS

Nous pouvons encoder des vidéos en HLS en interne ou en utilisant un service tiers. Pour créer un encodeur en interne, la meilleure option est d'utiliser FFMPEG, une puissante bibliothèque open source pour le traitement et l'encodage vidéo. Dans ce cas, nous devons analyser le contenu que nous allons encoder et définir un certain nombre de paramètres.

En HLS, nous devons définir une échelle de débit binaire (les débits et les résolutions de chaque étape) et la longueur des blocs. Lorsque nous encodons une vidéo, nous terminons avec un ensemble de listes de lecture et de morceaux. En règle générale, nous terminons le premier avec .m3u8 et le second avec les extensions .ts. Nous pouvons voir un exemple dans l'image suivante.

Nous pouvons voir une liste de lecture principale, une liste de lecture supplémentaire par rendu et tous les morceaux de chaque rendu. La playlist principale spécifie l'échelle de débit binaire et le chemin relatif de chaque rendu.

Apple fait une recommandation générique spécifiant l'échelle de débit et une durée de bloc de 10 secondes. Cependant, ce n'est pas très utile pour de nombreux types de contenu, comme les courtes vidéos courantes dans le commerce électronique et le marketing.

En fait, la meilleure approche consiste à régler l'échelle du débit binaire spécifiquement sur le contenu de la vidéo. Dans ce cas, si vous souhaitez tirer le meilleur parti de HLS et que vous n'êtes pas un expert en encodage, un service tiers fournissant un encodage par titre (avec HLS) est probablement le bon choix.

Joueurs HLS

Ici, nous trouvons deux options principales. Nous pouvons nous en tenir au lecteur HTML5 ou nous pouvons en utiliser un implémenté en JavaScript.

Lecteur HTML5

Les versions récentes de Safari prennent en charge HLS. Dans ce cas, vous pouvez utiliser les listes de lecture HLS de la même manière que les vidéos progressives. Avec d'autres navigateurs, vous pouvez utiliser une minuscule bibliothèque JavaScript pour implémenter le protocole HLS et utiliser à nouveau le lecteur HTML5 pour les vidéos progressives.

Cela peut être fait avec HLS.js. Cette bibliothèque implémente simplement la négociation des rendus, en fonction de la bande passante disponible. La prise en charge est quasi universelle, uniquement conditionnelle à la prise en charge de l'API de l'élément média.

Lecteur JavaScript

Au cas où nous aurions besoin de personnaliser l'expérience vidéo - ce qui est assez courant dans les pages de marketing et d'histoires -, nous devons utiliser autre chose que le lecteur HTML5 par défaut.

Bien qu'il existe de nombreuses options commerciales, Video.js est un bon choix. C'est un lecteur open source qui prend en charge un degré élevé de personnalisation, y compris différents skins et contrôles.

Un lecteur comme Video.js prend également en charge le suivi des événements liés à la vidéo (comme les actions de lecture ou de pause) afin que nous puissions les inclure dans nos propres analyses. En fait, inclure ces données dans notre Google Analytics est vraiment facile.

Sommaire

J'ai abordé les premières questions sur HLS que se poseront la plupart des utilisateurs potentiels: qu'est-ce que c'est et quand l'utiliser.

Bien qu'un pipeline de publication vidéo reposant sur HLS puisse être mis en œuvre et déployé en interne avec des outils open source tels que FFMPEG et video.js, il peut être judicieux d'utiliser un service de publication vidéo si vous n'êtes pas un expert en la matière. Ils apportent des fonctionnalités avancées telles que l'encodage par titre, s'occupent de tout le travail acharné et nous permettent de nous concentrer sur nos besoins de personnalisation.