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 zur Auslieferung von Live- und On-Demand-Audio und -Video über HTTP. Dieser Leitfaden erklärt Playlists, Mediensegmente, Qualitätswechsel und die Erstellung eines HLS-Streams mit Transloadit.

Was ist Streaming?

Mit Streaming können Sie Audio oder Video abspielen, während weitere Daten eintreffen, unabhängig davon, ob die Inhalte live oder aufgezeichnet sind. Auch beim progressiven Download kann die Wiedergabe beginnen, bevor eine Datei vollständig heruntergeladen ist. HLS ergänzt Playlists und segmentierte Auslieferung. Dadurch kann ein Player beim Abrufen der Inhalte zwischen verfügbaren Qualitätsstufen wählen.

Was bedeutet HLS?

Ausgeschrieben bedeutet HLS HTTP Live Streaming. Apple hat HLS entwickelt; 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 aufgezeichnete Videos auf Abruf.

Wie funktioniert HLS?

Bevor ein Video mit HLS gestreamt werden kann, umfasst die Paketierung in der Regel drei Schritte:

1. Die Quelle in mehrere Varianten codieren, etwa mit unterschiedlichen Auflösungen und Bitraten. Die Wahl von Codec und Mediencontainer hängt von den Geräten ab, die Sie unterstützen müssen. Apples aktuelle HLS-Authoring-Spezifikation⁠ führt die Anforderungen für die Wiedergabe auf.
2. Jede Variante in Mediensegmente aufteilen. Die Segmentdauer wird in der Playlist angegeben und ist nicht durch das HLS-Protokoll festgelegt.
3. Für jede Variante eine Media-Playlist sowie eine Multivariant-Playlist erstellen, die die verfügbaren Streams beschreibt.

Der Player liest die Multivariant-Playlist, wählt eine Variante und lädt deren Media-Playlist, um die Segmente zu finden. Ändern sich die Netzwerkbedingungen, kann er spätere Segmente aus einer Variante mit höherer oder niedrigerer Bitrate anfordern. Übereinstimmende Inhalte und Zeitstempel über die Varianten hinweg sowie aufeinander abgestimmte Segmentgrenzen helfen beim nahtlosen Wechsel.

Das folgende Diagramm zeigt, wie sich die Bildqualität bei schwankender Netzwerkverbindung ändern kann.

Audio und Video können gemeinsame Segmente oder separate Medienfassungen nutzen. HLS kann auch alternative Audiosprachen, Untertitel und Untertitel mit relevanten nichtsprachlichen Audiohinweisen anbieten. Die Metadaten der Playlist beschreiben die verfügbaren Optionen.

Was ist der Unterschied zwischen HLS und MPEG-DASH?

Wie HLS beschreibt MPEG-DASH segmentierte Medien und ermöglicht einem Player den adaptiven Wechsel zwischen Varianten. Die wichtigsten Unterschiede liegen in den Manifesten, Spezifikationen und Wiedergabeökosystemen, nicht in festen Regeln zu Codecs oder Segmentdauer.

Beide Formate können die Wiedergabe mit adaptiver Bitrate, Verschlüsselung, Untertitel mit relevanten nichtsprachlichen Audiohinweisen, alternative Audiospuren sowie Live- oder On-Demand-Auslieferung ermöglichen. Richten Sie Ihre Wahl nach den Zielplayern, den benötigten Funktionen und Ihrem Paketierungsstack.

Unterstützt Transloadit HLS?

Der unter /video/adaptive verfügbare Robot von Transloadit unterstützt sowohl HLS als auch MPEG-DASH. Die folgende gepflegte HLS-Demo EN (English) zeigt ein Template, das ein Video in drei Qualitätsstufen codiert und anschließend in Mediensegmente und Playlists im Format .m3u8 verpackt. Sie können diese Dateien über HTTP mit einem CDN ausliefern.

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

Der Player und die Playlist-Auflistungen unten verwenden ein lokales Encoding der Demodatei surf.mp4 mit FFmpeg 9.0.2, mit H.264-Main-Video bei 30 fps und AAC-LC-Audio. Wenn Sie das obige Template von Transloadit ausführen, können die Ausgabedateinamen und Werte von diesem Beispiel abweichen.

my_playlist.m3u8 ist eine Multivariant-Playlist, die in RFC 8216 Master-Playlist heißt. Jeder Eintrag mit #EXT-X-STREAM-INF beschreibt Bandbreite, Auflösung und Codecs einer Variante. Die folgende URI verweist auf deren Media-Playlist. Hier kennzeichnet mp4a.40.2 AAC-LC-Audio.

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

Diese Media-Playlist listet MPEG-TS-Segmente in Wiedergabereihenfolge auf. Jeder Eintrag mit #EXTINF gibt die Dauer des folgenden Segments in Sekunden an: hier 10, 10 und 1,966667. Das sind Zeitdauern, keine Zeitstempel oder Anweisungen zum Qualitätswechsel; diese Entscheidung trifft der Player.

#EXT-X-TARGETDURATION:10 legt die Obergrenze für Segmentdauern fest, die auf die nächste ganze Sekunde gerundet werden. Das letzte Segment kann kürzer sein. #EXT-X-PLAYLIST-TYPE:VOD kennzeichnet eine unveränderliche On-Demand-Playlist, und #EXT-X-ENDLIST gibt an, dass keine weiteren Segmente hinzugefügt werden. Dies sind Tags für Media-Playlists; sie gehören nicht in die Multivariant-Playlist.

Fazit

Probieren Sie die HLS-Demo EN (English) aus oder erstellen Sie ein Transloadit-Konto, um ein Template für adaptives Streaming zu erstellen.