Was ist HLS?

Joseph Grabski

Content-Leiter · Rochester, Vereinigtes Königreich · Bio anzeigen

HLS steht für HTTP Live Streaming. Es ist ein Streaming-Protokoll mit adaptiver Bitrate, mit dem sich Audio- und Videoinhalte live und auf Abruf über HTTP ausliefern lassen. Dieser Leitfaden erklärt seine Playlists, Mediensegmente, den Qualitätswechsel und wie Sie mit Transloadit einen HLS-Stream erzeugen.

Was ist Streaming?

Bevor wir uns den Einzelheiten von HLS widmen, sollten wir zunächst sicherstellen, dass wir Streaming als übergeordnetes Konzept verstehen. Streaming bezeichnet die kontinuierliche Auslieferung von Audio- oder Videoinhalten über das Internet in Echtzeit. Anders als bei herkömmlichen Downloads, bei denen die gesamte Datei heruntergeladen sein muss, bevor die Wiedergabe starten kann, können Nutzer beim Streaming bereits mit dem Konsum beginnen, während die Inhalte noch ausgeliefert werden.

Was bedeutet HLS?

Ausgeschrieben bedeutet HLS HTTP Live Streaming. Apple hat HLS entwickelt, und das Protokoll ist in RFC 8216⁠ öffentlich dokumentiert. Es nutzt die gewöhnliche HTTP-Auslieferung, sodass Streams von Webservern bereitgestellt und über CDNs verteilt werden können. HLS unterstützt sowohl Live-Übertragungen als auch vorab aufgezeichnete Videos auf Abruf.

Wie funktioniert HLS?

Bevor ein Video mit HLS gestreamt werden kann, führt ein Packaging-Workflow in der Regel drei Schritte aus:

1. Codieren Sie die Quelle in mehrere Varianten, etwa in unterschiedlichen Auflösungen und Bitraten. Die Wahl von Codec und Container hängt von den Geräten ab, die Sie unterstützen müssen; Apples aktuelle HLS-Authoring-Spezifikation⁠ führt die Wiedergabeanforderungen auf.
2. Teilen Sie jede Variante in Mediensegmente auf. Die Segmentdauer wird in der Playlist deklariert und nicht durch das HLS-Protokoll festgelegt.
3. Erstellen Sie für jede Variante eine Media Playlist sowie eine Multivariant Playlist, die die verfügbaren Streams beschreibt.

Der Player lädt eine Playlist herunter und wählt eine passende Variante aus. Wenn sich die Netzwerkbedingungen ändern, kann er spätere Segmente aus einer Variante mit höherer oder niedrigerer Bitrate anfordern, um die Wiedergabe aufrechtzuerhalten.

Das folgende Diagramm veranschaulicht, wie die Bildqualität variieren kann, wenn die Netzwerkverbindung schwankt.

Audio, Video und Untertitel können gemeinsam oder als eigene Medienvarianten ausgeliefert werden. Eigene Medienvarianten ermöglichen Funktionen wie alternative Sprachen und Untertitel; die Playlist teilt dem Player mit, welche Medienvarianten zusammengehören.

Worin unterscheiden sich HLS und MPEG-DASH?

Wie HLS beschreibt auch MPEG-DASH segmentierte Medien und erlaubt es einem Player, zwischen Varianten zu wechseln. Die nützlichsten Unterschiede liegen in ihren Manifesten, Spezifikationen und Wiedergabe-Ökosystemen, nicht in festen Vorgaben zu Codecs oder Segmentdauern.

Beide Formate können Wiedergabe mit adaptiver Bitrate, Verschlüsselung, Untertitel, alternative Audiospuren sowie Live- oder On-Demand-Auslieferung bieten. Entscheiden Sie sich anhand Ihrer Zielplayer, der benötigten Funktionen und Ihres Packaging-Stacks.

Unterstützt Transloadit HLS?

Dank dem Robot /video/adaptive unterstützt Transloadit sowohl HLS als auch MPEG-DASH. Sehen wir uns ein Template an, um zu zeigen, wie Sie mit diesem Robot hochwertige, streambare Medien erstellen können.

Das folgende Template codiert ein Video in drei verschiedenen Qualitätsstufen, bevor es an den Robot /video/adaptive übergeben wird. Anschließend wird es segmentiert und in einer Playlist im Format .m3u8 indexiert, die Sie Ihren Nutzern mithilfe eines CDN streamen können.

<!-- 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>

Ein Blick in die generierte Indexdatei my_playlist.m3u8 zeigt, dass darin der Speicherort der Indexdatei jeder Videoqualität hinterlegt ist. In jeder dieser Dateien bleiben die Reihenfolge der Segmente sowie der Zeitstempel erhalten, der angibt, wann zwischen den Segmenten gewechselt werden soll.

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

Fazit

Sie wissen jetzt, was HLS bedeutet, wie seine Playlists und Segmente funktionieren und worin es sich von MPEG-DASH unterscheidet. Um den Workflow zu testen, öffnen Sie die HLS-Demo EN (English) oder erstellen Sie ein Transloadit-Konto und bauen Sie ein Template für adaptives Streaming.