Video Chain Player mit Vite + React erstellen – URL-teilbar (State Sync / i18n / AWS Deployment)

Was ist das?

Ich habe Video Chain Player erstellt, eine Web-App, mit der Sie „nur die notwendigen Segmente von Videos verketten und als einzelnes Erlebnis abspielen/teilen können."

🔗 Jetzt ausprobieren: https://video-chain-player.sloth255.com/

• Clippen Sie ein Video durch Angabe von Start- und Endzeiten
• Verketten (Warteschlange) Sie mehrere Clips für kontinuierliche Wiedergabe
• Kodieren Sie den Kettenstatus in eine URL und teilen Sie mit einem einzigen Link

Perfekt zum Erstellen von „Zeige nur diesen Teil"-Erlebnissen wie Workout-Flows, Vorlesungs-Highlights oder Kompilationsreels.

Was Benutzer tun können

• Clips erstellen: Videos durch Eingabe von URL/ID und Start-/Endzeiten hinzufügen
• Neu anordnen: Reihenfolge per Drag & Drop anpassen
• Vorschau: Vor Ort abspielen, um Timing zu überprüfen
• Teilen: URL kopieren und senden (Empfänger öffnen die gleiche Kette)
• Mehrsprachig: Sprachen über URL wechseln (z. B. ?lang=de)

Tech-Stack

Architektur und Implementierungs-Highlights

1) Zustand-State mit URL synchronisieren für sofortiges Teilen

Um den Sharing-Aufwand zu minimieren, habe ich die App so konzipiert, dass sie die wesentlichen Informationen der Kette in die URL kodiert.

• Kein serverseitiger Speicher (kein Account erforderlich)
• Empfänger können denselben Zustand durch bloßes Öffnen des Links reproduzieren

Um URL-Aufblähung (die das Teilen erschwert) zu verhindern, habe ich die in der URL kodierten Informationen minimiert.

• Nur Video-id und start/end-Zeiten kodieren
• Titel und Thumbnails später zur Anzeige ergänzen (verhindert URL-Aufblähung)

Beispiel für minimale Kodierung:

// Nur wesentliche Infos (id/start/end) in URL kodieren
const minimalSegments = segments.map(({ id, start, end }) => ({ id, start, end }));

Außerdem enthalten geteilte Links keine Wiedergabeposition (welcher Clip gerade abgespielt wird), was sicherstellt, dass „das Öffnen des Links von vorne beginnt."

2) Laufzeit-i18n-Laden via HTTP Backend (Build-unabhängig)

Zunächst überlegte ich, Übersetzungs-JSONs zur Build-Zeit zu importieren, aber für bessere Kompatibilität mit statischem Hosting und CI entschied ich mich für das Fetchen per HTTP aus /public/locales/{{lng}}/translation.json.

• Einfach zu warten – einfach Sprachdateien hinzufügen
• Build-Prozess ist nicht von Übersetzungsimporten abhängig

3) URL-Variationen robust handhaben (watch / Shorts / embed)

Die Unterstützung von „nur Standard-URLs" wäre unpraktisch, daher habe ich die Eingabemuster erweitert:

• Standard-Watch-URLs
• Shorts
• Embed-URLs

Dadurch stieg die „Einfach einfügen"-Erfolgsquote, was die Massenregistrierung deutlich einfacher macht.

4) Deployment: S3 + CloudFront, CI: GitHub Actions (OIDC)

Da es eine statische Site ist, ist das Deployment unkompliziert:

• S3 (statisches Hosting)
• CloudFront (CDN)

CI/CD wird über GitHub Actions automatisiert: Build → S3-Sync → CloudFront-Cache-Invalidierung.

Der Schlüsselpunkt ist OIDC, das Deployment ohne Speicherung langlebiger Schlüssel ermöglicht (Secrets minimieren bei gleichzeitiger Kontrolle auf Umgebungsebene).

Selbst für statische Sites bietet CloudFront davor:

• Schnelles Laden via Caching
• Einfache SPA-Routing-Unterstützung (z. B. Fallback auf /)

Zusammenfassung

Video Chain Player konzentriert sich auf „Clips × kontinuierliche Wiedergabe × URL-Sharing" mit Schwerpunkt auf:

• State in URLs kodieren, um den Sharing-Aufwand zu minimieren
• i18n + Sprach-URL-Sync, damit Empfänger dieselbe Sprache sehen
• „Produktionsbereit" machen, einschließlich Deployment und Analytics

Technisch gesehen konnte ich kombinieren:

• Schnelle Entwicklung mit Vite
• Zustand-State mit URLs synchronisieren für bessere Teilbarkeit
• Leichtgewichtiges Übersetzungsmanagement mit i18next's HTTP Backend
• Sicheres Deployment mit OIDC

Den gesamten „vollen Betriebsstack" auf einmal aufzubauen war das Highlight.