Qu’est-ce que HLS ?

Joseph Grabski

Responsable du contenu · Rochester, Royaume-Uni · Afficher la bio

HLS signifie HTTP Live Streaming. Ce protocole de streaming à débit adaptatif permet de diffuser sur HTTP de l’audio et de la vidéo en direct et à la demande. Ce guide explique ses listes de lecture, ses segments multimédias, le changement de qualité et comment générer un flux HLS avec Transloadit.

Qu’est-ce que le streaming ?

Le streaming permet de lire de l’audio ou de la vidéo pendant que la suite du contenu arrive, que ce contenu soit en direct ou préenregistré. Le téléchargement progressif permet aussi de commencer la lecture avant la fin du téléchargement d’un fichier. HLS ajoute des listes de lecture et une diffusion par segments, ce qui permet au lecteur de choisir parmi les niveaux de qualité disponibles à mesure qu’il récupère le contenu.

Que signifie HLS ?

La forme développée de HLS est HTTP Live Streaming. Apple a développé HLS, et le protocole est documenté publiquement dans la RFC 8216⁠. Il utilise la diffusion HTTP classique ; les flux peuvent donc être servis par des serveurs web et distribués via des CDN. HLS prend en charge les diffusions en direct et la vidéo préenregistrée à la demande.

Comment fonctionne HLS ?

Avant qu’une vidéo puisse être diffusée avec HLS, un processus de conditionnement comprend généralement trois étapes :

1. Encoder la source en plusieurs variantes de débit et de résolution. Le choix des codecs et des conteneurs dépend des appareils que vous devez prendre en charge ; la spécification de création HLS⁠ actuelle d’Apple répertorie ses exigences de lecture.
2. Diviser chaque variante en segments multimédias. La durée des segments est déclarée dans la liste de lecture plutôt que fixée par le protocole HLS.
3. Créer une liste de lecture multimédia pour chaque variante et une liste de lecture multivariante qui décrit les flux disponibles.

Le lecteur lit la liste de lecture multivariante, choisit une variante et charge sa liste de lecture multimédia pour trouver les segments. À mesure que les conditions réseau changent, il peut demander les segments suivants d’une variante de débit supérieur ou inférieur. La correspondance des contenus et des horodatages entre variantes, ainsi que l’alignement des limites des segments, facilitent une transition fluide.

Le schéma ci-dessous montre comment la qualité de l’image peut varier selon les fluctuations de la connexion réseau.

L’audio et la vidéo peuvent partager des segments ou utiliser des rendus distincts. HLS peut aussi proposer des pistes audio dans d’autres langues, des sous-titres et des sous-titres pour sourds et malentendants ; les métadonnées des listes de lecture décrivent les choix disponibles.

Quelle est la différence entre HLS et MPEG-DASH ?

Comme HLS, MPEG-DASH décrit des médias segmentés et permet au lecteur de passer d’une variante à l’autre pour s’adapter. Les différences les plus utiles concernent leurs manifestes, leurs spécifications et leurs écosystèmes de lecture, plutôt que des règles fixes sur les codecs ou la durée des segments.

Les deux formats peuvent offrir une lecture à débit adaptatif, du chiffrement, des sous-titres pour sourds et malentendants, des pistes audio alternatives et une diffusion en direct ou à la demande. Choisissez selon les lecteurs visés, les fonctionnalités requises et votre chaîne de conditionnement.

Transloadit prend-il en charge HLS ?

Le Robot /video/adaptive de Transloadit prend en charge HLS et MPEG-DASH. La démo HLS maintenue EN (English) ci-dessous présente un Template qui encode une vidéo en trois niveaux de qualité, puis les conditionne en segments multimédias et en listes de lecture .m3u8. Vous pouvez diffuser ces fichiers sur HTTP à l’aide d’un 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>

Le lecteur et les listes de lecture ci-dessous utilisent un encodage local réalisé avec FFmpeg 9.0.2 à partir du fichier surf.mp4 de la démo, avec une vidéo H.264 Main à 30 fps et un audio AAC-LC. Lorsque vous exécutez le Template Transloadit ci-dessus, les noms des fichiers de sortie et les valeurs peuvent différer de cette illustration.

my_playlist.m3u8 est une liste de lecture multivariante, appelée liste de lecture principale dans la RFC 8216. Chaque entrée #EXT-X-STREAM-INF décrit la bande passante, la résolution et les codecs d’une variante. L’URI qui suit pointe vers sa liste de lecture multimédia. Ici, mp4a.40.2 identifie l’audio 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

Cette liste de lecture multimédia répertorie les segments MPEG-TS dans l’ordre de lecture. Chaque #EXTINF indique la durée du segment suivant en secondes : 10, 10 et 1,966667 ici. Ce sont des durées, et non des horodatages ou des instructions de changement de qualité ; le lecteur fait ce choix.

#EXT-X-TARGETDURATION:10 définit la limite supérieure des durées des segments arrondies à la seconde entière la plus proche. Le dernier segment peut être plus court. #EXT-X-PLAYLIST-TYPE:VOD signale une liste de lecture à la demande qui ne change pas, et #EXT-X-ENDLIST indique qu’aucun autre segment ne sera ajouté. Ces balises appartiennent aux listes de lecture multimédias et ne doivent pas figurer dans la liste de lecture multivariante.

Pour conclure

Essayez la démo HLS EN (English) ou créez un compte Transloadit pour créer un Template de streaming adaptatif.