Kostengünstiges Videostreaming mit Cloudflare R2: So funktioniert's!

Videostreaming kann schnell teuer werden – besonders wenn man versucht, es über klassische Cloud-Plattformen wie AWS, Mux oder Vimeo zu lösen. Speziell für kleinere Anbieter von Online-Kursen, Lernplattformen oder Portfolios mit Videoinhalten stellt sich schnell die Frage: Gibt es eine bezahlbare Alternative? Ja: Cloudflare R2 bietet eine leistungsstarke und kostengünstige Lösung – nicht nur für Videos, sondern auch für statische Inhalte wie Bilder, PDFs oder HTML-Dateien.

Was ist Cloudflare R2?

Cloudflare R2 ist ein S3-kompatibler Objektspeicher, der besonders durch eine wichtige Eigenschaft auffällt: keine Egress-Kosten. Das bedeutet, dass Daten, die von deinem Speicher aus an Nutzer ausgeliefert werden (z. B. Videostreams), kostenlos übertragen werden – im Gegensatz zu Anbietern wie AWS, wo gerade dieser Traffic oft teuer wird.

R2 lässt sich hervorragend mit Cloudflares globalem CDN kombinieren. Dadurch profitieren statische Assets wie:

Videos
Bilder
PDFs
Fonts
JSON-/HTML-Dateien

von schneller Auslieferung und optimaler Verfügbarkeit weltweit.

Grundlagen des Videostreamings mit HLS

Für das Web ist HTTP Live Streaming (HLS) ein etablierter Standard. Dabei wird ein Video in kleine Segmente (TS-Dateien) unterteilt und in verschiedenen Qualitäten gespeichert. Eine sogenannte Master-Playlist (M3U8) verweist auf die jeweiligen Auflösungen.

Vorteile von HLS:

Adaptives Streaming: Automatische Qualitätsanpassung je nach Bandbreite des Nutzers.
Hohe Kompatibilität: Funktioniert in nahezu allen modernen Browsern und Geräten.
Einfaches Hosting: Kann auf jedem statischen File-Server wie R2 gehostet werden.

Schritt-für-Schritt: Eigene Videos vorbereiten

1. Transkodierung mit FFmpeg

Der erste Schritt ist die Umwandlung einer Videodatei (z.B. MP4) in das HLS-Format mit mehreren Auflösungen. FFmpeg ist dafür das Werkzeug der Wahl.

Ein Beispiel-Skript könnte folgende Aufgaben erledigen:

Auflösung und Bitrate für verschiedene Qualitätsstufen definieren.
Das Video in kurze Segmente aufteilen (z. B. 4 Sekunden pro Chunk).
Eine Master-Playlist (master.m3u8) generieren, die auf die einzelnen Qualitätsstufen verweist.
Ein Vorschaubild (Poster) aus dem Video extrahieren.

ffmpeg -i input.mp4 \
  -map 0 -c:v libx264 -b:v 3000k -s 1920x1080 \
  -f hls -hls_time 4 -hls_playlist_type vod \
  -master_pl_name master.m3u8 \
  output_folder/

2. Struktur aufbauen

Eine saubere Ordnerstruktur ist entscheidend für die Übersicht. Pro Video empfiehlt sich eine eigene Ordnerhierarchie:

/videos/
  /kursname/
    /video1/
      /720p/
        ... (ts-Dateien)
      /1080p/
        ... (ts-Dateien)
      master.m3u8
      preview.jpg

3. Upload nach Cloudflare R2

Der Upload der generierten Dateien kann einfach mit einem Tool wie rclone automatisiert werden, das mit S3-kompatiblen Speichern umgehen kann.

rclone sync ./videos remote:r2-bucket/videos

Vorteile von R2 für Video und statische Inhalte:

Kein Vendor Lock-in dank S3-Kompatibilität.
Keine zusätzlichen Kosten für den ausgehenden Traffic (Egress).
Ideal auch für Bilder, Fonts, PDFs und andere statische Web-Assets.
Unterstützt Versionierung und flexible Zugriffskontrollen (Public/Private).

Integration mit einem Videoplayer

Zur Wiedergabe im Frontend empfiehlt sich ein moderner Videoplayer, der HLS von Haus aus unterstützt, wie z. B. Demux Player oder Mux Player. Die Einbindung ist denkbar einfach:

<demux-player
  stream-type="on-demand"
  src="https://cdn.example.com/videos/kurs1/video1/master.m3u8"
  poster="https://cdn.example.com/videos/kurs1/video1/preview.jpg"
></demux-player>

Tipp: Nutze Lazy-Loading für den Player, um Layout-Shifts beim Seitenaufbau zu vermeiden. Ein Thumbnail oder eine verschwommene Vorschau (Blur-Preview) verbessert das Nutzererlebnis vor dem Ladebeginn.

Optional: Schutz durch Pre-signed URLs

Um Inhalte nur für zahlende oder eingeloggte Nutzer zugänglich zu machen, können signierte URLs mit einem Ablaufdatum verwendet werden. Dabei ist zu beachten, dass nicht nur die M3U8-Playlist, sondern alle einzelnen TS-Segmente signiert werden müssen. Für einfachere Anwendungsfälle reicht oft schon ein nicht öffentlich gelisteter Pfad in Kombination mit Rate-Limiting oder Cloudflare Access.

Kostenvergleich

Ein grober Vergleich der monatlichen Kosten für das Hosting von 500 GB Daten und einem ausgehenden Traffic von 500 GB zeigt die Stärke von R2:

Anbieter	Speicher (500 GB)	Traffic (500 GB)	Geschätzte Monatliche Kosten
AWS S3 + CloudFront	~$12	~$45	~$57
Mux	n/a	n/a	deutlich teurer
Cloudflare R2	$6-10	$0 (Egress)	$6-10

Ein letzter Gedanke

Cloudflare R2 bietet eine schlanke und extrem kostengünstige Möglichkeit, Videos und andere statische Inhalte performant zu hosten und weltweit auszuliefern. In Kombination mit dem HLS-Format und einem passenden Videoplayer lassen sich moderne Lernplattformen, Portfolios oder Videoportale realisieren, ohne in die typische Kostenfalle von Cloud-Anbietern zu tappen.

Insights