Natives Video im Web

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

TIL über das HLS-Videoformat

HLS steht für HTTP Live Streaming. Es ist ein adaptives Bitraten-Streaming-Protokoll, das von Apple entwickelt wurde. Einer dieser Sätze, die man auf jeder Party lässig fallen lassen kann. Äh. Zurück zum Thema: HLS ermöglicht es Ihnen, eine Playlist mit mehreren Videoquellen in verschiedenen Auflösungen anzugeben. Basierend auf der verfügbaren Bandbreite können diese Videoquellen umgeschaltet werden und ermöglichen eine adaptive Wiedergabe.

Dies ist eine interessante Reise, bei der das Ingenieurteam hinter Kitchen Stories vom Vimeo-Player (160 kB) wegwechseln wollte, aber Vimeo weiterhin als Video-Host nutzen wollte, da sie mit einem Pro-Plan direkte Videolinks anbieten. Stattdessen verwenden sie das native <video>-Element, eine Bibliothek zur Handhabung von HLS und ein Wrapper-Element, um ihnen einen kleinen Bonus an UX zu geben.

Diese Video-Sache ist schwer mitzuhalten! Es gibt ein weiteres neues Format namens AV1, das offenbar eine große Sache ist, da sowohl YouTube als auch Netflix es nutzen. Andrey Sitnik hat hier darüber geschrieben

Obwohl der AV1-Codec noch als experimentell gilt, können Sie seine hochwertigen, niedrig-Bitraten-Funktionen bereits für einen beträchtlichen Teil Ihres Web-Publikums nutzen (Benutzer mit aktuellen Versionen von Chrome und Firefox). Natürlich möchten Sie Benutzer anderer Browser nicht im Stich lassen, aber die Attribute für die <video>- und <source>-Tags machen die Implementierung dieser Logik einfach, und in reinem HTML müssen Sie nicht viel tun, um Benutzer-Agents mit JavaScript zu erkennen.

Das erwähnt HLS noch nicht einmal, aber ich schätze, das liegt daran, dass HLS ein Streaming-Protokoll ist, das immer noch in irgendeiner Form streamen muss.

Direkter Link →