¿Qué es HLS?

Joseph Grabski

Responsable de contenidos · Rochester, Reino Unido · Mostrar bio

HLS significa HTTP Live Streaming. Es un protocolo de streaming de tasa de bits adaptativa para entregar audio y video en vivo y bajo demanda a través de HTTP. Esta guía explica sus listas de reproducción, sus segmentos de medios, el cambio de calidad y cómo generar un stream HLS con Transloadit.

¿Qué es el streaming?

Antes de entrar en los detalles de HLS, asegurémonos primero de entender el streaming como un concepto más amplio. El streaming es la entrega continua, en tiempo real, de contenido de audio o video a través de internet. A diferencia de las descargas tradicionales, en las que hay que descargar el archivo completo antes de que el usuario pueda iniciar la reproducción, el streaming permite a los usuarios empezar a consumir el contenido mientras se entrega.

¿Qué significa HLS?

La forma completa de HLS es HTTP Live Streaming. Apple desarrolló HLS, y el protocolo está documentado públicamente en RFC 8216⁠. Utiliza entrega HTTP común, por lo que los streams pueden servirse desde servidores web y distribuirse a través de CDN. HLS admite tanto transmisiones en vivo como video bajo demanda pregrabado.

¿Cómo funciona HLS?

Antes de poder transmitir un video con HLS, un flujo de trabajo de empaquetado suele realizar tres pasos:

1. Codifica la fuente en varias variantes, como distintas resoluciones y tasas de bits. Las opciones de códec y contenedor dependen de los dispositivos que necesites admitir; la especificación de creación de HLS⁠ actual de Apple enumera sus requisitos de reproducción.
2. Divide cada variante en segmentos de medios. La duración de los segmentos se declara en la lista de reproducción en lugar de estar fijada por el protocolo HLS.
3. Crea una Media Playlist para cada variante y una Multivariant Playlist que describa los streams disponibles.

El reproductor descarga una lista de reproducción y elige una variante adecuada. A medida que cambian las condiciones de la red, puede solicitar segmentos posteriores de una variante con una tasa de bits mayor o menor para mantener la reproducción.

El siguiente diagrama ilustra cómo puede variar la calidad de imagen a medida que fluctúa la conexión de red.

El audio, el video y los subtítulos pueden entregarse juntos o como variantes de medios alternativas independientes. Esas variantes alternativas hacen posibles funciones como los idiomas alternativos y los subtítulos; la lista de reproducción le indica al reproductor qué variantes alternativas van juntas.

¿Cuál es la diferencia entre HLS y MPEG-DASH?

Al igual que HLS, MPEG-DASH describe medios segmentados y permite que un reproductor se adapte entre variantes. Las diferencias más útiles están en sus manifiestos, sus especificaciones y sus ecosistemas de reproducción, no en reglas fijas de códec o de duración de segmento.

Ambos formatos pueden ofrecer reproducción con tasa de bits adaptativa, cifrado, subtítulos, audio alternativo y entrega en vivo o bajo demanda. Elige según los reproductores a los que te dirijas, las funciones que necesites y tu stack de empaquetado.

¿Transloadit admite HLS?

Gracias al Robot /video/adaptive, Transloadit admite tanto HLS como MPEG-DASH. Veamos un Template para descubrir cómo puedes empezar a usar este Robot y crear contenido multimedia de alta calidad apto para streaming.

El siguiente Template codificará un video en tres niveles de calidad distintos, antes de pasarlo al Robot /video/adaptive. Después se segmenta y se indexa en una lista de reproducción .m3u8, que puedes transmitir a tus usuarios mediante una 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>

Si observamos el archivo de índice generado my_playlist.m3u8, vemos que almacena la ubicación del archivo de índice de cada calidad de video. En cada uno de ellos se conserva el orden de los segmentos, así como la marca de tiempo que indica cuándo cambiar de segmento.

my_playlist.m3u8

#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=687899,FRAME-RATE=30,CODECS="avc1.4d001e,mp4a.40.5",RESOLUTION=480x270
480x270/480x270_534648_30.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1216861,FRAME-RATE=30,CODECS="avc1.4d001f,mp4a.40.5",RESOLUTION=640x360
640x360/640x360_981616_30.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1916095,FRAME-RATE=30,CODECS="avc1.4d001f,mp4a.40.5",RESOLUTION=960x540
960x540/960x540_1567376_30.m3u8
#EXT-X-ENDLIST

960x540_1567376_30.m3u8

#EXTM3U
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-TARGETDURATION:11
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.110,
seg__0.ts
#EXTINF:10.060,
seg__1.ts
#EXTINF:1.950,
seg__2.ts
#EXT-X-ENDLIST

Para terminar

Ya sabes qué significa HLS, cómo funcionan sus listas de reproducción y sus segmentos, y en qué se diferencia de MPEG-DASH. Para probar el flujo de trabajo, abre la demo de HLS EN (English) o crea una cuenta de Transloadit y construye un Template de streaming adaptativo.