Media-Loop-Widget: Videos und Bilder in Endlosschleife als Overlay #45

New issue

Open

opened 2026-07-15 19:06:48 +02:00 by frank · 0 comments

frank commented

2026-07-15 19:06:48 +02:00

Owner

Kontext

Nerd or Die's "Media Looper" ist ein beliebtes Overlay-Tool, das Videos und Bilder in Endlosschleife mit konfigurierbarer Verzögerung abspielt. Es wird genutzt für:

Social Media Popups (Twitter, Instagram, Discord)
Lower Thirds und Callouts
Sponsor-Banner (rotierende Logos)
Gaming Sub Reminders
Video Clips und Highlights im Stream

Streamertool hat aktuell keine vergleichbare Funktion — Medien können nur statisch als Overlay-Extension oder via OBS-Browser-Source eingebunden werden, aber nicht konfigurierbar geloopt werden.

Ziel

Ein Media-Loop-Widget, das als Overlay-Endpoint verfügbar ist:

1. Medien-Schleife (Loop)

Liste von Medien (Bilder + Videos) in einer Endlosschleife abspielen
Unterstützte Formate: .webm, .mp4, .png, .jpg, .jpeg, .gif, .svg
Konfigurierbare Anzeigedauer pro Medium (Sekunden)
Optionaler Delay/Übergang zwischen Medien

2. Konfiguration

Admin-UI: Medien hochladen, Reihenfolge festlegen, Dauer pro Medium, Delay
Playlist-Ansicht: Drag-and-Drop Reihenfolge, Thumbnail-Vorschau
Volume-Steuerung: pro Video einstellbar (default: stumm)
Loop-Modi: Einmalig, Endlos, Zufällig, Mit Verzögerung

3. Use-Case-Vorlagen

Social Popup: Zeigt Social-Media-Logos/Links nacheinander
Sponsor Banner: Rotierende Sponsoren-Logos
Lower Third: Text + Grafik-Kombination für Ankündigungen
Sub Reminder: "Danke an ..." Rotation
Highlight Reel: Kurze Videoclips nacheinander

4. Overlay-Endpoint

Eigener Endpoint: /overlay/media-loop
Konfiguration via URL-Parametern (Liste der Medien)
Transparenter Hintergrund (OBS-kompatibel)
Optionaler Maus-Overlay-Hide nach X Sekunden

Technische Leitplanken

HTML/CSS/JS-Widget im Overlay-Server (bestehende Architektur)
Medien aus lokalem Verzeichnis (User Data)
Canvas-Element für Image-Layer, Video-Element für Video-Layer
Kein externer Service nötig
Kann später als Extension (#4) oder Custom Widget (#38) realisiert werden

Akzeptanz

Bilder und Videos werden in Endlosschleife abgespielt
Anzeigedauer pro Medium ist konfigurierbar
Volume ist pro Medium steuerbar (0-100%)
Loop-Modi (Endlos, Einmalig, Zufällig) funktionieren
Admin-UI erlaubt Medien-Upload und Playlist-Konfiguration
Overlay funktioniert als OBS-Browser-Source mit transparentem Hintergrund

## Kontext Nerd or Die's "Media Looper" ist ein beliebtes Overlay-Tool, das Videos und Bilder in Endlosschleife mit konfigurierbarer Verzögerung abspielt. Es wird genutzt für: - Social Media Popups (Twitter, Instagram, Discord) - Lower Thirds und Callouts - Sponsor-Banner (rotierende Logos) - Gaming Sub Reminders - Video Clips und Highlights im Stream Streamertool hat aktuell keine vergleichbare Funktion — Medien können nur statisch als Overlay-Extension oder via OBS-Browser-Source eingebunden werden, aber nicht konfigurierbar geloopt werden. ## Ziel Ein **Media-Loop-Widget**, das als Overlay-Endpoint verfügbar ist: ### 1. Medien-Schleife (Loop) - Liste von Medien (Bilder + Videos) in einer Endlosschleife abspielen - Unterstützte Formate: .webm, .mp4, .png, .jpg, .jpeg, .gif, .svg - Konfigurierbare Anzeigedauer pro Medium (Sekunden) - Optionaler Delay/Übergang zwischen Medien ### 2. Konfiguration - **Admin-UI**: Medien hochladen, Reihenfolge festlegen, Dauer pro Medium, Delay - **Playlist-Ansicht**: Drag-and-Drop Reihenfolge, Thumbnail-Vorschau - **Volume-Steuerung**: pro Video einstellbar (default: stumm) - **Loop-Modi**: Einmalig, Endlos, Zufällig, Mit Verzögerung ### 3. Use-Case-Vorlagen - **Social Popup**: Zeigt Social-Media-Logos/Links nacheinander - **Sponsor Banner**: Rotierende Sponsoren-Logos - **Lower Third**: Text + Grafik-Kombination für Ankündigungen - **Sub Reminder**: "Danke an ..." Rotation - **Highlight Reel**: Kurze Videoclips nacheinander ### 4. Overlay-Endpoint - Eigener Endpoint: /overlay/media-loop - Konfiguration via URL-Parametern (Liste der Medien) - Transparenter Hintergrund (OBS-kompatibel) - Optionaler Maus-Overlay-Hide nach X Sekunden ## Technische Leitplanken - HTML/CSS/JS-Widget im Overlay-Server (bestehende Architektur) - Medien aus lokalem Verzeichnis (User Data) - Canvas-Element für Image-Layer, Video-Element für Video-Layer - Kein externer Service nötig - Kann später als Extension (#4) oder Custom Widget (#38) realisiert werden ## Akzeptanz - [ ] Bilder und Videos werden in Endlosschleife abgespielt - [ ] Anzeigedauer pro Medium ist konfigurierbar - [ ] Volume ist pro Medium steuerbar (0-100%) - [ ] Loop-Modi (Endlos, Einmalig, Zufällig) funktionieren - [ ] Admin-UI erlaubt Medien-Upload und Playlist-Konfiguration - [ ] Overlay funktioniert als OBS-Browser-Source mit transparentem Hintergrund

frank added the

area:overlays

priority:low

effort:medium

labels

2026-07-15 19:22:51 +02:00

frank added this to the Overlays & Widgets milestone

2026-07-15 21:08:22 +02:00

frank referenced this issue

2026-07-15 21:15:08 +02:00

Overlay Theme System – Zentrale CSS-Tokens, Themes & Presets für alle Widgets #96