Leitfaden für Redakteure: VidPly Player

Kurzer Überblick

VidPly ist ein universeller, barrierefreier Mediaplayer, der verschiedene Quellen unterstützt:

Zweistufiger Arbeitsablauf

Schritt 1: Medien-Datensätze erstellen

Erstellen Sie zunächst wiederverwendbare Medienelemente im VidPly-Medienspeicher.

Schritt 2: Player zur Seite hinzufügen

Fügen Sie anschließend ein VidPly-Player-Inhaltselement hinzu und wählen Sie Ihre Medien aus.

Schritt 1: Medien-Einträge erstellen

So finden Sie es

Web → Listenmodul → Speicherordner auswählen → Auf „+“ klicken → VidPly Media

Oder verwenden Sie die Schaltfläche „Neuen Datensatz erstellen“ im VidPly-Player-Element.

Der schnellste Weg: Import über URL

Für YouTube, Vimeo, SoundCloud, Streaming-URLs (.m3u8 / .mpd) sowie zugelassene externe MP4-/MP3-Links:

1. Erstellen Sie einen neuen VidPly-Medien-Eintrag (oder öffnen Sie einen bestehenden)
2. Wählen Sie oben im Formular „Von URL importieren“
3. Fügen Sie die vollständige Medien-URL ein und klicken Sie auf „Importieren“
4. VidPly erkennt den Medientyp, fügt die Online-Mediendatei hinzu und füllt Titel, Interpret und Poster automatisch aus, sofern der Anbieter diese Angaben bereitstellt
5. Überprüfen Sie die Felder, fügen Sie bei Bedarf Untertitel hinzu und klicken Sie dann auf „Speichern“

Sie müssen den Medientyp nicht mehr auswählen, bevor Sie die URL einfügen. Das manuelle Dropdown-Menü „Medientyp“ und die Option „Medien per URL hinzufügen“ im Dateifeld stehen fortgeschrittenen Benutzern weiterhin zur Verfügung.

Bei bestehenden Datensätzen mit einer verknüpften Online-Mediendatei verwenden Sie „Metadaten aktualisieren“, um oEmbed-Daten erneut abzurufen, ohne Felder zu überschreiben, die Sie bereits manuell ausgefüllt haben.

Erläuterung der Medientypen

Video

Verwendung: Selbst gehostete Videodateien, HLS/DASH-Streaming mit optionalen progressiven Fallbacks

Unterstützte Formate: MP4, WebM, HLS (.m3u8), DASH (.mpd)

So erstellen Sie einen Eintrag:

1. Medientyp auswählen: Video
2. Klicken Sie auf „Mediendatei hinzufügen“ und laden Sie Ihr Video hoch oder fügen Sie eine Streaming-URL (.m3u8 / .mpd) hinzu
3. Fügen Sie optional weitere Dateien als Fallbacks hinzu (z. B. DASH + HLS + MP4)
4. Fügen Sie einen Titel hinzu (erforderlich)
5. Fügen Sie ein Posterbild hinzu (Miniaturansicht, die vor der Wiedergabe angezeigt wird) – zulässige Formate: JPG / JPEG, PNG, WebP, SVG

Tipps:

• Laden Sie mehrere Formate hoch, um die Browserkompatibilität zu gewährleisten und Ausweichmöglichkeiten bereitzustellen (DASH → HLS → MP4/WebM)
• Empfohlen: MP4 mit H.264-Codec als progressives Fallback
• HLS-/DASH-Quellen verwenden standardmäßig eingebettete Untertitel; lokale VTT-Dateien können diese überschreiben
• HLS-Streams werden abgespielt hls.js in Chrome / Firefox / Edge / Desktop-Safari sowie über natives HLS auf iOS / iPadOS – Untertitel, Transkript und Qualitätssteuerung funktionieren auf allen Plattformen
• Halten Sie die Dateigrößen in einem angemessenen Rahmen (für das Web komprimieren)

Audio

Verwendung für: Podcasts, Musik, Audioinhalte, Audio-Streaming

Unterstützte Formate: MP3, OGG, HLS (.m3u8), DASH (.mpd)

So erstellen Sie sie:

1. Medientyp auswählen: Audio
2. Klicken Sie auf „Mediendatei hinzufügen“ und laden Sie Ihre Audiodatei hoch oder fügen Sie eine Streaming-URL (.m3u8 / .mpd) hinzu
3. Fügen Sie optional weitere Dateien als Fallback hinzu (z. B. DASH + HLS + MP3)
4. Fügen Sie einen Titel hinzu (erforderlich)
5. Fügen Sie optional ein Posterbild (Albumcover) hinzu – zulässige Formate: JPG / JPEG, PNG, WebP, SVG

YouTube

Verwendung: YouTube-Videos mit DSGVO-konformer Datenschutzebene

So erstellen Sie es:

1. Medientyp auswählen: YouTube
2. Klicken Sie auf „Mediendatei hinzufügen“ → „Externes Video hinzufügen“
3. Fügen Sie die YouTube-URL ein (z. B. www.youtube.com/watch.)
4. Fügen Sie einen Titel hinzu (erforderlich)
5. Fügen Sie ein Posterbild hinzu (wird vor der Einwilligung angezeigt) – zulässige Formate: JPG / JPEG, PNG, WebP, SVG

Datenschutzverhalten:

• Das Video wird erst geladen, wenn der Nutzer auf „Abspielen“ klickt
• Zeigt einen Overlay mit Datenschutzhinweis an
• Kein Tracking vor der Einwilligung des Nutzers
• Entspricht den Anforderungen der DSGVO

Vimeo

Verwendung für: Vimeo-Videos mit Datenschutz-Overlay

So erstellen Sie sie:

1. Medientyp auswählen: Vimeo
2. Klicken Sie auf „Mediendatei hinzufügen“ → „Externes Video hinzufügen“
3. Fügen Sie die Vimeo-URL ein (z. B. vimeo.com/123456789)
4. Fügen Sie einen Titel hinzu (erforderlich)
5. Fügen Sie ein Titelbild hinzu – zulässige Formate: JPG / JPEG, PNG, WebP, SVG

SoundCloud

Verwendung: SoundCloud-Titel oder -Playlists mit Datenschutzebene

So erstellen Sie das Element:

1. Medientyp auswählen: SoundCloud
2. Geben Sie die Medien-URL ein (Track- oder Set-URL)
3. Fügen Sie einen Titel hinzu (erforderlich)
4. Fügen Sie ein Posterbild hinzu (optional) – zulässige Formate: JPG / JPEG, PNG, WebP, SVG

 

Nachdem der Nutzer die Datenschutzerklärung akzeptiert hat, läuft die Wiedergabe im iframe des SoundCloud-Widgets (visuelle Wellenform-Benutzeroberfläche). Dies ist der standardmäßige, ressourcenschonende Weg. Entwickler können optional über eine Template-/Prozessor-Überschreibung zur einheitlichen Steuerleiste von VidPly wechseln – siehe PrivacyLayer.md → SoundCloud in den Renderer-Modus umschalten.

 

Metadaten hinzufügen

Jeder Mediendatensatz verfügt über eine Metadatenpalette:

VidPly-Listenansicht & Detailseite (Übersicht)

So erstellen Sie eine Übersicht im Mediathek-Stil: Fügen Sie ein VidPly-Listenansicht- Inhaltselement hinzu, wählen Sie eine Detailseite aus und fügen Sie eine oder mehrere Listenansicht- Zeilen hinzu (Regal oder Raster, manuelle oder kategoriebasierte Auswahl). Optional: Aktivieren Sie dieclientseitige Paginierung und legen Sie die Anzahl der Elemente pro Seite und pro Zeile fest, nutzen Sie das Sortiersteuerelement im Browser auf der öffentlichen Website und behalten Sie die Regal-Definitionen in der Standardsprache bei, wenn die Website übersetzt wird. Siehe Listenansicht und Detailseite für eine Schritt-für-Schritt-Anleitung zur Einrichtung, URLs und Hinweise für Administratoren .

VidPly Detail (das Inhaltselement auf der Medien-Detailseite) verfügt über eine Option „Verwandte Inhalte“ unter „Einstellungen“ (standardmäßig aktiviert). Deaktivieren Sie diese, wenn Sie die Zeile „Das könnte Ihnen auch gefallen“ unterhalb des Players nicht anzeigen möchten.

Optionen der Player-Benutzeroberfläche (pro Mediendatensatz)

• Geschwindigkeitsschaltfläche ausblenden: Blendet die Steuerung der Wiedergabegeschwindigkeit für dieses Medienelement aus.
  • Einzelnes Element: Die Geschwindigkeitssteuerung ist ausgeblendet.
  • Wiedergabeliste: Die Geschwindigkeitssteuerung ist nur ausgeblendet, solange dieses Element der aktive Titel ist (sie kann für andere Titel wieder angezeigt werden).
• Hilfe zu Tastaturkürzeln ausblenden: Blendet die Hilfe-Schaltfläche (.vidply-help) in der Steuerleiste für diesen Medientitel aus. Das Verhalten entspricht dem der Geschwindigkeitssteuerung: Einzelner Titel bzw. pro Titel in der Wiedergabeliste. Der Tastaturbefehl „?“ öffnet weiterhin den Tastaturbefehlsdialog, wenn die Tastatursteuerung für das Inhaltselement aktiviert ist.
• Download zulassen: Zeigt eine Download-Schaltfläche in der Steuerleiste für dieses Medienelement an. Funktioniert automatisch, wenn eine progressive Datei (MP4, WebM, MP3, OGG) angehängt ist. Füge bei reinen HLS-/DASH-Einträgen eine progressive Fallback-Datei hinzu, damit der Player eine herunterladbare URL auflösen kann (Manifeste selbst sind nicht herunterladbar).
• „Floating Player aktivieren (benutzerdefiniertes PiP)“: Ersetzt das native Picture-in-Picture des Browsers durch das verschiebbare und in der Größe anpassbare schwebende Fenster von VidPly (wird auch ausgelöst, wenn das Video während der Wiedergabe aus dem Sichtbereich scrollt). Gilt nur für Player mit einzelnen Titeln, nicht für Wiedergabelisten. Unterscheidet sich von der Standard-PiP-Schaltfläche in der Symbolleiste, die den nativen Mini-Player des Browsers verwendet.
• Puffer-Ladeanzeige: Während der Pufferung des Players wird automatisch eine zentrierte Ladeanzeige eingeblendet – keine Konfiguration erforderlich. Funktioniert für lokale Dateien sowie HLS- und DASH-Streams.

Barrierefreiheitsfunktionen

VidPly bietet Unterstützung für die Barrierefreiheit gemäß WCAG 2.2 AA.

Bildunterschriften & Untertitel

Registerkarte: Untertitel

WebVTT (.vtt) oder SubRip (.srt) für Zuschauer, die Untertitel benötigen (darunter viele gehörlose und schwerhörige Nutzer):

1. Klicken Sie auf „Untertiteldatei hinzufügen“
2. Laden Sie Ihre .vtt oder .srt Datei
3. Wählen Sie die Spurart aus: Untertitel oder Bildunterschriften
4. Legen Sie den Sprachnamen fest: z. B. „Englisch“, „Deutsch“
5. Stellen Sie den Sprachcode ein: z. B. „en“, „de“
6. Speichern Sie den Medieneintrag – SRT-Dateien werden automatisch in WebVTT konvertiert; Sie erhalten eine Benachrichtigung im Backend, sobald die Konvertierung erfolgreich abgeschlossen ist

Mehrere Sprachen: Fügen Sie für jede Sprache mehrere Untertiteldateien hinzu.

SRT-Uploads: SubRip (.srt) wird der Einfachheit halber akzeptiert. VidPly speichert WebVTT intern, da Browser und die Transkriptionsfunktion dies erfordern. Die ursprüngliche SRT-Datei wird beim Speichern ersetzt.

Bereits im Dateispeicher vorhandene ältere SRT-Dateien: Bitten Sie einen Website-Administrator, den einmaligen Upgrade-Assistenten auszuführen: Admin-Tools → Upgrade → Upgrade-Assistenten → VidPly: SRT-Untertitel-Dateien in WebVTT konvertieren (keine Befehlszeile erforderlich).

VTT-Beispiel:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our video tutorial.

00:00:03.000 --> 00:00:07.000
Today we'll learn about VidPly.

Kapitel

Registerkarte: Untertitel → Kapitel

Fügen Sie Kapitelmarkierungen für eine einfache Navigation hinzu:

1. Klicken Sie auf „Kapitel-Datei hinzufügen“
2. Laden Sie Ihre Kapitel hoch .vtt oder .srt Datei hoch (SRT wird beim Speichern des Mediendatensatzes in WebVTT konvertiert)
3. Spurtyp festlegen: Kapitel
4. Legen Sie die Sprachinformationen fest

Beispiel für VTT-Kapitel:

WEBVTT

00:00:00.000 --> 00:02:30.000
Introduction

00:02:30.000 --> 00:08:00.000
Main Content

00:08:00.000 --> 00:10:00.000
Conclusion

Audiodeskription

Registerkarte: Barrierefreiheit → Audiodeskription

VidPly unterstützt zwei Workflows für gesprochene Audiodeskriptionen sowie Textbeschreibungen im Transkript.

Option A – Beschriebenes Video (empfohlen)

Für blinde und sehbehinderte Nutzer fügen Sie ein Video hinzu, bei dem die Beschreibungen bereits in den Ton eingemischt sind:

1. Klicken Sie auf „Audiobeschreibung hinzufügen“
2. Laden Sie eine alternative MP4- oder WebM-Datei mit eingebetteter Sprachausgabe hoch
3. Nutzer können über die AD-Schaltfläche zwischen dem Standardvideo und dem beschriebenen Video wechseln

Legen Sie optional die Dauer der Audiobeschreibung fest, wenn die beschriebene Version länger ist als das Original.

Option B – VTT-Sprechtext (erweiterte Audiobeschreibung, kein beschreibendes Video)

Wenn Sie keine beschriebene Videodatei haben:

1. Laden Sie unter „Untertitel“ eine WebVTT-Datei hoch und legen Sie den Track-Typ auf „Beschreibungen“ fest
2. Lassen Sie das Feld „Audiobeschreibung“ leer (oder legen Sie den Modus explizit fest – siehe unten)
3. Wenn der Audiobeschreibungsmodus auf „Automatisch“ oder „Beschreibungen – VTT-Sprache“ eingestellt ist, hält VidPly das Video bei jedem Beschreibungssignal an, liest den Text über die Sprachsynthese des Browsers vor und setzt dann die Wiedergabe fort

Textbeschreibungshinweise bleiben im Transkriptfenster für Nutzer sichtbar, die lieber lesen möchten. Dieser Weg erfordert Browser-Unterstützung speechSynthesis ; die Sprachqualität variiert je nach Browser.

Modus „Audiodeskription“

Registerkarte: Barrierefreiheit → Modus für Audiobeschreibung

Alternative Untertitel-/Kapitel-Dateien für das beschriebene Video

Bei Verwendung der Umschaltung auf beschriftetes Video können Sie pro Untertitel- oder Kapitel-Dateiverweis eine VTT-Datei mit Audiobeschreibung anhängen (tx_desc_src_file). Diese alternativen Dateien werden geladen, wenn der AD-Modus aktiv ist.

Gebärdensprache

Registerkarte: Barrierefreiheit → Gebärdensprache

Überlagerung mit Gebärdensprachdolmetschung hinzufügen:

1. Klicken Sie auf „Video mit Gebärdensprache hinzufügen“
2. Video mit Gebärdensprachdolmetscher hochladen
3. Wird als Bild-in-Bild-Einblendung angezeigt

Transkripte

Registerkarte: Untertitel → Transkript aktivieren

Durchsuchbares Texttranskript aus Untertiteln erstellen:

1. „Transkriptfenster anzeigen“ aktivieren
2. Untertitel werden als anklickbarer, durchsuchbarer Text angezeigt
3. Benutzer können auf eine beliebige Zeile klicken, um zu dieser Stelle zu springen

Schritt 2: Player zur Seite hinzufügen

Inhaltselement einfügen

Seitenmodul → Inhalt hinzufügen → VidPly-Player

Medienelemente auswählen

Registerkarte „Medien“:

• Klicken Sie in das Feld „Medienelemente“
• Suchen Sie nach Ihren Mediendatensätzen und wählen Sie diese aus
• Fügen Sie mehrere Elemente für eine Wiedergabeliste hinzu (2 oder mehr Elemente)

Player-Optionen konfigurieren

Registerkarte „Einstellungen“:

Wiedergabeeinstellungen:

• Lautstärke: Standardlautstärke (0,0 – 1,0)
• Wiedergabegeschwindigkeit: Standardgeschwindigkeit (0,25 – 2,0)
• Sprache: Bestimmte UI-Sprache erzwingen

Transkript (pro Medienelement):

• Transkript pro Mediendatei aktivieren: Mediendatei → Registerkarte „Untertitel“ → „Transkript aktivieren“
• Das Transkript-Fenster wird angezeigt, wenn für mindestens einen ausgewählten Eintrag das Transkript aktiviert ist.

Wiedergabelisten

Automatische Wiedergabeliste

Wählen Sie zwei oder mehr Medienelemente aus, um automatisch eine Wiedergabeliste zu erstellen:

• Neben dem Player wird eine Miniaturansichtsliste angezeigt
• Klicken Sie auf ein beliebiges Element, um es abzuspielen
• Mit „Auto-Advance“ wird der nächste Titel abgespielt
• Mit der Option „Wiederholen“ werden alle Titel nacheinander abgespielt

Bewährte Vorgehensweisen

• Verwenden Sie einheitliche Vorschaubilder (gleiche Abmessungen)
• Fügen Sie allen Elementen Titel hinzu
• Erwägen Sie, verwandte Inhalte zu gruppieren
• Ordnen Sie die Elemente logisch an (per Ziehen neu anordnen)

Player-Steuerelemente

Visuelle Steuerelemente

 

Hinweis: Die Aktivierung des schwebenden Players bei einer Medienaufzeichnung nutzt das benutzerdefinierte, seiteninterne schwebende Fenster von VidPly anstelle des (und zusätzlich zur Konfiguration des) nativen PiP-Verhaltens. Siehe „Player-UI-Optionen“ oben.

 

Tastaturkürzel

Hilfe zu Tastaturkürzeln

Wenn die Tastatur für das Inhaltselement aktiviert ist, können Benutzer die Tastenkombination „?“ drücken oder auf die Hilfe-Schaltfläche in der Steuerleiste klicken, um ein fokussiertes Dialogfeld zu öffnen, in dem alle aktiven Tastenkombinationen aufgelistet sind. Blenden Sie die Schaltfläche pro Mediendatensatz mit „Hilfe zu Tastaturkürzeln ausblenden“ aus (das ? Tastenkombination funktioniert weiterhin, sofern die Tastatursteuerung für das Inhaltselement nicht deaktiviert ist).

Datenschutzebene (DSGVO)

Für YouTube, Vimeo und SoundCloud:

So funktioniert es

1. Vor der Einwilligung: Es werden nur das Vorschaubild und die Wiedergabetaste angezeigt
2. Datenschutzerklärung: Erläutert, dass Daten an einen externen Dienst gesendet werden
3. Der Nutzer klickt auf „Abspielen“: Das Video wird geladen und sofort abgespielt
4. Keine Cookies, bis der Nutzer ausdrücklich zustimmt

Einstellungen für die Datenschutzebene konfigurieren

Modul „Liste“ → Einstellungen für die Datenschutzebene

Passen Sie den Inhalt der Datenschutzebene für alle externen Dienste an:

1. Erstellen Sie einen neuen Datenschutzeinstellungsdatensatz
2. Konfigurieren Sie die Einstellungen für jeden Dienst (YouTube, Vimeo, SoundCloud):
   • Überschrift (optional) – Wird über dem Datenschutztext angezeigt
   • Einleitungstext – Text vor dem Link zur Datenschutzerklärung
   • Abschlusstext – Text nach dem Link zur Datenschutzerklärung
   • Link zur Datenschutzerklärung – URL zur Seite mit der Datenschutzerklärung
   • Linktext – Text für den Link zur Datenschutzerklärung
   • Schaltflächenbeschriftung (optional) – Barrierefreie Beschriftung für die Wiedergabetaste
3. Für mehrsprachige Websites: Erstellen Sie übersetzte Versionen des Datensatzes

Die Einstellungen gelten sowohl für einzelne Titel als auch für Wiedergabelisten. Bei leeren Feldern werden automatisch die Standardübersetzungen verwendet.

Was die Nutzer sehen

┌─────────────────────────────────┐
│                                 │
│      [Poster Image]             │
│                                 │
│         Play                    │
│                                 │
│  [Optional Headline]            │
│  Privacy Notice: Clicking play  │
│  will load content from YouTube │
│  and send data to Google.       │
│  [Privacy Policy Link] applies. │
└─────────────────────────────────┘

Tipps und bewährte Vorgehensweisen

Videoqualität

• Auflösung: 1080p oder 720p für das Web
• Bitrate: 5–8 Mbit/s für HD
• Codec: H.264 für MP4
• Stellen Sie immer ein Vorschaubild bereit

Audioqualität

• Bitrate: 128–320 kbps MP3
• Abtastrate: 44,1 oder 48 kHz

Barrierefreiheit

• Fügen Sie Videos mit Sprachinhalten immer Untertitel hinzu
• Stellen Sie Audiodeskriptionen für visuelle Inhalte bereit
• Verwenden Sie aussagekräftige Titel
• Fügen Sie Alt-Text zu Posterbildern hinzu

Leistung

• Komprimieren Sie Videos vor dem Hochladen
• Verwenden Sie eine angemessene Auflösung (nicht immer 4K)
• Erwägen Sie für lange Inhalte die Einbindung von HLS- oder DASH-Streaming-Quellen
• Externe Dienste (YouTube/Vimeo) reduzieren die Serverauslastung

Mobil

• Auf mobilen Geräten testen
• Der Player ist standardmäßig responsiv und passt sich der Bildschirm- bzw. Containergröße an
• Die Touch-Steuerung funktioniert automatisch

Fehlerbehebung

VTT-Validierung

Stellen Sie sicher, dass Ihre VTT-Dateien:

• mit WEBVTT in der ersten Zeile
• eine Leerzeile nach WEBVTT
• Verwenden Sie das Format: HH:MM:SS.mmm --> HH:MM:SS.mmm
• Text in der/den nächsten Zeile(n)

Kurzanleitung

Benötigen Sie Hilfe? Wenden Sie sich an Ihren Website-Administrator oder sehen Sie im Dokumentationsverzeichnis nach.