Leitfaden für Redakteure: VidPly Player

Kurzer Überblick

VidPly ist ein universeller, barrierefreier Mediaplayer, der mehrere 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-Datensätze 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.

Erläuterung der Medientypen

Video

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

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

So erstellen Sie einen Datensatz:

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:

• Lade mehrere Formate hoch, um die Browserkompatibilität zu gewährleisten und Ausweichmöglichkeiten zu bieten (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 hls.js in Chrome / Firefox / Edge / Desktop-Safari und ü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:

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 Fallbacks 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 Datenschutzschicht

So erstellen Sie:

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üge 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 es:

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

SoundCloud

Verwendung für: SoundCloud-Titel oder -Playlists mit Datenschutzebene

So erstellen Sie:

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

 

SoundCloud kombiniert ein GDPR-Einwilligungs-Overlay (kein Tracking, bevor der Nutzer zustimmt) mit dem speziellen VidPly-SoundCloud-Renderer, der nach der Einwilligung die Kontrolle übernimmt – Wiedergabe, Suchfunktion, Lautstärke, Transkript und der Rest der VidPly-Benutzeroberfläche verhalten sich genauso wie bei YouTube und Vimeo.

 

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-Listview- Inhaltselement hinzu, wählen Sie eine Detailseite aus und fügen Sie eine oder mehrere Listview- Zeilen hinzu (Regal oder Raster, manuelle oder kategoriebasierte Auswahl). Optional: Aktivieren Sie dieclientseitige Paginierung und legen Sie die Anzahl der Elemente pro Seite und Zeile fest, nutzen Sie die Sortierfunktion im Browser auf der öffentlichen Website und behalten Sie die Regal-Definitionen in der Standardsprache bei, wenn die Website übersetzt wird. Siehe `Listview.md` für eine Schritt-für-Schritt-Anleitung zur Einrichtung, URLs und Hinweise für Administratoren .

VidPly Detail (das Inhaltselement auf der Mediendetailseite) 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.

Player-UI-Optionen (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 erscheinen).
• Puffer-Ladesymbol: Ein zentriertes Ladesymbol wird automatisch angezeigt, während der Player puffert – keine Konfiguration erforderlich. Funktioniert für lokale Dateien, HLS- und DASH-Streams.
• Download-Schaltfläche (sofern durch Ihr Sitepackage / TCA-Override verfügbar): Medienbezogene Umschaltfunktion, um eine Download-Schaltfläche in der Steuerleiste anzuzeigen. Konfigurieren Sie für HLS-/DASH-Quellen zusätzlich eine explizite Download-URL, die auf eine einzelne MP4-/MP3-/WebM-Datei verweist (Manifeste sind nicht direkt herunterladbar).

Barrierefreiheitsfunktionen

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

Untertitel

Registerkarte: Untertitel

Fügen Sie WebVTT-Dateien (.vtt) für Zuschauer hinzu, die Untertitel benötigen (einschließlich vieler gehörloser und schwerhöriger Nutzer):

1. Klicken Sie auf „Untertiteldatei hinzufügen“
2. Laden Sie Ihre .vtt Datei
3. Wählen Sie die Art der Spur: Untertitel oder Bildunterschriften
4. Legen Sie den Sprachnamen fest: z. B. „English“, „Deutsch“
5. Stellen Sie den Sprachcode ein: z. B. „en“, „de“

Mehrere Sprachen: Fügen Sie für jede Sprache mehrere VTT-Dateien hinzu.

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 Datei
3. Track-Typ festlegen: Kapitel
4. Sprachinformationen festlegen

Beispiel für Kapitel-VTT:

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 → Audiobeschreibung

Für blinde und sehbehinderte Nutzer fügen Sie ein Video mit gesprochenen Beschreibungen hinzu:

1. Klicken Sie auf „Audiodeskription hinzufügen“
2. Laden Sie ein alternatives Video mit Audiodeskriptionsspur hoch
3. Benutzer können zwischen dem Standardvideo und dem Video mit Audiobeschreibung wechseln

Gebärdensprache

Registerkarte: Barrierefreiheit → Gebärdensprache

Überlagerung mit Gebärdensprachdolmetschung hinzufügen:

1. Klicken Sie auf „Gebärdensprachvideo 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. „Transkript-Fenster 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 Mediendateien und wählen Sie diese aus
• Fügen Sie mehrere Elemente für eine Wiedergabeliste hinzu (2+ 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
• Die Option „Wiederholen“ spielt alle Titel nacheinander ab

Bewährte Vorgehensweisen

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

Player-Steuerelemente

Visuelle Steuerelemente

Tastaturkürzel

Datenschutz (DSGVO)

Für YouTube, Vimeo und SoundCloud:

So funktioniert es

1. Vor der Einwilligung: Es werden nur das Titelbild und der Abspielknopf 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 auflisten → Einstellungen für die Datenschutzebene

Anpassen des Inhalts der Datenschutzebene für alle externen Dienste:

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. Leere Felder verwenden automatisch die Standardübersetzungen.

Was Benutzer 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 Verfahren

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 Posterbild bereit

Audioqualität

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

Barrierefreiheit

• Fügen Sie Videos mit Sprachausgabe immer Untertitel hinzu
• Stellen Sie Audiobeschreibungen 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 das Hinzufügen von HLS- oder DASH-Streaming-Quellen
• Externe Dienste (YouTube/Vimeo) reduzieren die Serverlast

Mobil

• Auf mobilen Geräten testen
• Der Player ist standardmäßig responsiv und passt sich der Bildschirm-/Containergröße an
• 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 Site-Administrator oder lesen Sie die technische Dokumentation (Repository-Stammverzeichnis).