¿Qué es HLS?

Joseph Grabski

Responsable de contenidos · Rochester, Reino Unido ·

HLS significa HTTP Live Streaming. Es un protocolo de streaming con 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, segmentos multimedia, cambios de calidad y cómo generar una transmisión HLS con Transloadit.

Formas holográficas en 3D alrededor del texto «What is HLS»

¿Qué es el streaming?

El streaming te permite reproducir audio o video mientras sigue llegando contenido, ya sea en vivo o pregrabado. La descarga progresiva también permite iniciar la reproducción antes de que termine de descargarse un archivo. HLS añade listas de reproducción y entrega por segmentos, lo que permite al reproductor elegir entre los niveles de calidad disponibles mientras obtiene el contenido.

¿Qué significa HLS?

El nombre completo de HLS es HTTP Live Streaming. Apple desarrolló HLS, y el protocolo está documentado públicamente en RFC 8216. Utiliza la entrega HTTP habitual, por lo que las transmisiones pueden servirse desde servidores web y distribuirse mediante CDN. HLS admite tanto transmisiones en vivo como video pregrabado bajo demanda.

¿Cómo funciona HLS?

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

Codificar el contenido de origen en varias variantes, por ejemplo, con distintas resoluciones y tasas de bits. La elección de códecs y contenedores depende de los dispositivos que necesites admitir; la especificación actual de Apple para crear contenido HLS enumera sus requisitos de reproducción.
Dividir cada variante en segmentos multimedia. La duración de los segmentos se declara en la lista de reproducción, en lugar de estar fijada por el protocolo HLS.
Crear una lista de reproducción multimedia para cada variante y una lista de reproducción multivariante que describa las transmisiones disponibles.

El reproductor lee la lista de reproducción multivariante, elige una variante y carga su lista de reproducción multimedia para encontrar los segmentos. A medida que cambian las condiciones de la red, puede solicitar los segmentos posteriores de una variante con una tasa de bits mayor o menor. La correspondencia del contenido y de las marcas de tiempo entre variantes, junto con la alineación de los límites de los segmentos, facilita las transiciones fluidas.

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

Diagrama que muestra cómo la conectividad de red puede afectar la calidad del video con HLS

El audio y el video pueden compartir segmentos o utilizar versiones de audio y video separadas. HLS también puede ofrecer idiomas de audio alternativos, subtítulos y subtítulos descriptivos; los metadatos de las listas de reproducción describen las opciones disponibles.

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

Al igual que HLS, MPEG-DASH describe contenido multimedia segmentado y permite que un reproductor se adapte cambiando entre variantes. Las diferencias más útiles están en sus manifiestos, especificaciones y ecosistemas de reproducción, no en reglas fijas sobre los códecs o la duración de los segmentos.

	HLS	MPEG-DASH
Manifiesto	Listas de reproducción multivariante y multimedia M3U8	Documento MPD
Especificación	RFC 8216 y la especificación HLS en evolución	ISO/IEC 23009-1
Entrega multimedia	Segmentos obtenidos mediante HTTP	Segmentos obtenidos mediante HTTP
Compatibilidad con plataformas de Apple	Compatibilidad mediante frameworks nativos y Safari	Generalmente proporcionada mediante una implementación de reproductor compatible

Ambos formatos pueden ofrecer reproducción con tasa de bits adaptativa, cifrado, subtítulos descriptivos, audio alternativo y entrega en vivo o bajo demanda. Elige según los reproductores de destino, las funciones necesarias y el stack de empaquetado.

¿Transloadit admite HLS?

El Robot /video/adaptive de Transloadit admite tanto HLS como MPEG-DASH. La demo de HLS que mantenemos (English), que aparece a continuación, muestra un Template que codifica un video en tres niveles de calidad y luego los empaqueta como segmentos multimedia y listas de reproducción .m3u8. Puedes entregar esos archivos mediante HTTP utilizando 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/v6.0.6/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/v6.0.6/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>

Leer la documentación

El reproductor y los listados de las listas de reproducción que aparecen a continuación utilizan una codificación local con FFmpeg 9.0.2 de surf.mp4, el archivo de la demo, con video H.264 Main a 30 fps y audio AAC-LC. Cuando ejecutes el Template de Transloadit anterior, los nombres de archivo y los valores de salida pueden diferir de los de este ejemplo.

my_playlist.m3u8 es una lista de reproducción multivariante, denominada lista de reproducción maestra en RFC 8216. Cada entrada #EXT-X-STREAM-INF describe el ancho de banda, la resolución y los códecs de una variante. La URI que aparece después apunta a su lista de reproducción multimedia. Aquí, mp4a.40.2 identifica el 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

Esta lista de reproducción multimedia enumera los segmentos MPEG-TS en orden de reproducción. Cada #EXTINF indica la duración del segmento siguiente en segundos: aquí, 10, 10 y 1,966667. Son duraciones, no marcas de tiempo ni instrucciones para cambiar de calidad; el reproductor toma esa decisión.

#EXT-X-TARGETDURATION:10 establece el límite superior de las duraciones de los segmentos redondeadas al segundo entero más cercano. El segmento final puede ser más corto. #EXT-X-PLAYLIST-TYPE:VOD identifica una lista de reproducción bajo demanda que no cambia, y #EXT-X-ENDLIST indica que no se añadirán más segmentos. Estas etiquetas pertenecen a la lista de reproducción multimedia y no deben incluirse en la lista de reproducción multivariante.

Para terminar

Prueba la demo de HLS (English) o crea una cuenta de Transloadit para crear un Template de streaming adaptativo.