Zum Inhalt springen

Leitfaden für Redakteure: VidPly Player

Ein praktischer Leitfaden für Redakteure zur Verwendung von VidPly zum Einfügen barrierefreier Video- und Audioinhalte.

VidPly TYPO3 Extension Logo

Kurzer Überblick

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

MedientypQuelleDatenschutzebeneAm besten geeignet für
VideoMP4/WebM hochladen + HLS/DASHNeinLokale und gestreamte Videos
AudioMP3/OGG hochladen + HLS/DASHNeinPodcasts, Musik, Streaming
YouTubeVideo-URLJa (DSGVO)Externe Videos
VimeoVideo-URLJa (DSGVO)Professionelle Videos
SoundCloudTrack-/Set-URLJa (DSGVO)Musik, Podcasts

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 nutzen 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-Mediendatensatz (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 die 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 Datenschutzschicht

So erstellen Sie einen Eintrag:

  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 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üge 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 Datenschutz-Ebene

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, erfolgt die Wiedergabe innerhalb des SoundCloud-Widget-iframes (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:

FeldBeschreibungErforderlich
TitelAnzeigename im Player/in der WiedergabelisteJa
InterpretName des Urhebers (wird in der Wiedergabeliste angezeigt)Nein
BeschreibungKurztext (Listenkarten, Player-Kontext)Nr.
Ausführliche BeschreibungRich-Text (CKEditor); wird auf der VidPly-Detailseite unterhalb der Kurzbeschreibung, in den Episodenkarten-Layouts hinter der Schaltfläche „Beschreibung anzeigen“ sowie in einem Popover auf den Rasterkarten der Listenansicht angezeigtNein
SlugURL-Segment für Detail-Links in der Listenansicht (automatisch aus dem Titel generiert; kann auf der Registerkarte „Metadaten“ überschrieben werden)Nein
DauerLänge in Sekunden (zur Anzeige)Nein
VeröffentlichungsdatumVeröffentlichungsdatum der Folge; wird in der Episodenkarte und der Wiedergabeliste angezeigt und als Veröffentlichungsdatum in den strukturierten Daten verwendetNein
FolgenummerFreitext über dem Titel in der Episodenkarte (z. B. 11, S2E4)Nr.
PosterMiniaturbildEmpfohlen
KategorienTYPO3-Kategorien (werden als Chips auf den Karten der Listenansicht angezeigt; dienen zur automatischen Auswahl von Zeilen in der Listenansicht)Nein

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 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 wird nur ausgeblendet, solange dieses Element der aktive Titel ist (sie kann bei anderen Titeln 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 Geschwindigkeitsschaltfläche: Einzelner Titel bzw. pro Titel in der Wiedergabeliste. Der Tastaturbefehl?“ öffnet weiterhin den Dialog mit den Tastaturbefehlen, wenn die Tastatursteuerung für das Inhaltselement aktiviert ist.
  • Download zulassen: Bietet die Mediendatei zum Download an. Funktioniert automatisch, wenn eine progressive Datei (MP4, WebM, MP3, OGG) angehängt ist. Bei reinen HLS-/DASH-Datensätzen fügen Sie eine progressive Fallback-Datei hinzu, damit eine Download-URL aufgelöst werden kann (Manifeste selbst sind nicht herunterladbar).
    • Einzelnes Element: In der Steuerleiste erscheint eine Download-Schaltfläche.
    • Mehrere Medien: Die Schaltfläche in der Steuerleiste folgt dem ausgewählten Titel – sie bietet die Datei des gerade abgespielten Titels an und verschwindet bei Titeln, bei denen diese Einstellung nicht aktiviert ist.
    • Layout der Episodenliste: Jede Episode wird aufgelistet, sodass der Download-Link direkt in der Episodenbeschreibung erscheint und genutzt werden kann, ohne zuvor den Titel auswählen zu müssen.
  • Floating-Player aktivieren (benutzerdefiniertes PiP): Ersetzt das native Picture-in-Picture des Browsers durch das verschiebbare und in der Größe anpassbare Floating-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 Elementen, 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 und 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 „Bildunterschriften-Datei hinzufügen“
  2. Laden Sie Ihre .vtt oder .srt Datei
  3. Wählen Sie den Spurentyp aus: Untertitel oder Bildunterschriften
  4. Legen Sie den Sprachnamen fest: z. B. „Englisch“, „Deutsch“
  5. Geben 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 → Audiobeschreibung

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

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 beschrifteten Video wechseln

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

Option B – VTT-Sprechanleitung (erweiterte AD, 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

ModusVerhalten
Automatisch (Standard)Beschriebenes Video verwenden, falls hochgeladen; andernfalls VTT-Sprache, sofern ein VTT mit Beschreibungen vorhanden ist
Nur beschreibtes VideoWechselt ausschließlich zu beschrifteten MP4-/WebM-Dateien; VTT-Sprache wird ignoriert
Beschreibende VTT-SpracheNur VTT-Hinweise für Beschreibungen vorlesen; Video nicht wechseln

Alternative Untertitel-/Kapitel-Dateien für beschriftetes 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+ Elemente)

Player-Optionen konfigurieren

Registerkarte „Einstellungen“:

OptionStandardBeschreibung
LayoutNur PlayerDarstellung des Elements – siehe unten
Position in der WiedergabelisteUnterhalb des PlayersAn der Stelle, an der das Wiedergabelistenfeld im Player erscheint, wenn zwei oder mehr Medienelemente ausgewählt sind (below bzw. right auf dem Desktop; auf Mobilgeräten wird es immer darunter gestapelt)
An der letzten Position fortsetzenAusAngebot, an der Stelle fortzufahren, an der der Besucher aufgehört hat (überschreibt die Standardeinstellung der Website, wenn diese Option für dieses Element aktiviert ist)
Automatische WiedergabeAusAutomatisch abspielen
WiederholenAusNach Ende wiederholen
StummAusStart stummgeschaltet
SteuerungEinPlayer-Bedienelemente anzeigen
Untertitel StandardAusUntertitel standardmäßig anzeigen
TastaturEinTastaturbefehle aktivieren
Automatischer BildwechselEinNächsten Titel in der Wiedergabeliste automatisch abspielen

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.

Layout der Episodenkarte (Podcasts)

Das Feld „Layout“ steuert, wie das Element dargestellt wird:

LayoutErgebnis
Nur PlayerDer einfache Player – unveränderte Standardeinstellung
EpisodenkarteQuadratisches Cover mit großem Wiedergabeknopf, Episodennummer, Titel, Veröffentlichungsdatum, Dauer und Beschreibung; der Player befindet sich darunter
Episodenkarte mit EpisodenlisteDie Kopfzeile der Karte folgt dem aktuell wiedergegebenen Titel, darunter befindet sich eine vom Server gerenderte Episodenliste (das Wiedergabelisten-Fenster im Player ist ausgeblendet – die Liste dient als Titelauswahl)

Die Karte wird mit den Daten des ersten ausgewählten Mediendatensatzes gefüllt. Veröffentlichungsdatum und Folgenummer stammen aus der Metadatenpalette dieses Datensatzes, und das Cover ist dessen Poster – verwenden Sie daher für Podcast-Folgen ein quadratisches Poster, um das beste Ergebnis zu erzielen. Die Karte wird auf eine einzige Spalte umgebrochen, wenn die Inhaltsspalte schmal ist, sodass sie auch in Seitenleisten und Modalfenstern funktioniert.

Reihenfolge der Episodenliste und Seiten

Bei der Episodenkarte mit Episodenliste erscheinen drei weitere Felder auf der Registerkarte „Einstellungen“:

OptionStandardBeschreibung
Reihenfolge der EpisodenManuellReihenfolge, in der die Liste geöffnet wird: manuell (die Reihenfolge Ihrer Medienelemente), nach Datum (neueste/älteste zuerst) oder nach Titel (A–Z)
Episodenliste paginierenEinTeilen Sie die Liste in Seiten auf, sobald sie mehr Folgen enthält, als auf eine Seite passen
Episoden pro Seite10Anzahl der Episoden pro Seite (1–200)

Besucher können die Liste mithilfe des Dropdown-Menüs neben der Überschrift „Folgen (n)“ selbst neu sortieren. Sortierung und Paginierung ändern nur die Liste: Die Wiedergabe folgt immer der Reihenfolge Ihrer Medienelemente, sodass „Nächste/Vorherige“ und der automatische Vorlauf vorhersehbar bleiben – und wenn die Wiedergabe zu einer Folge auf einer anderen Seite wechselt, springt die Liste zu dieser Seite.

Episoden ohne Veröffentlichungsdatum werden in beiden Datumsreihenfolgen zuletzt aufgeführt; geben Sie daher das Veröffentlichungsdatum an, wenn Sie sich auf die Sortierung danach verlassen.

Anmerkungen in der Karte und der Liste anzeigen

Sobald ein Medieneintrag eine „Ausführliche Beschreibung“ enthält, erscheinen auf der Karte und in der Listenzeile die Schaltfläche „Beschreibung anzeigen“, über die der Rich-Text direkt an Ort und Stelle aufgeklappt wird. Es muss nichts extra aktiviert werden – füllt ihr das Feld aus, erscheint die Schaltfläche; lasst ihr es leer, sieht die Karte wie zuvor aus. Besucher, die alles auf einen Blick sehen möchten, können weiterhin die Detailseite aufrufen, auf der derselbe Text vollständig angezeigt wird.

Achten Sie darauf, die ausführliche Beschreibung gut zu strukturieren (Absätze, Listen, Links). Sie wird unverändert direkt unter der Folge angezeigt, sodass sehr lange Texte die nächste Folge weit nach unten verschieben, auch wenn sie zunächst ausgeblendet sind.

Der gleiche Text ist auch über die Listenansicht erreichbar: Karten in einer Rasterzeile erhalten eine kleine Schaltfläche in der rechten unteren Ecke, die die Beschreibung in einem Overlay öffnet. Karten in einer Regalzeile haben diese Schaltfläche nicht – ein Regal scrollt seitwärts und bietet keinen Platz dafür, daher bleibt dort der Link der Karte zur Detailseite bestehen.

Wiedergabelisten

Automatische Wiedergabeliste

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

  • Die Miniaturansichtsliste erscheint neben oder unter dem Player (siehe Position der Wiedergabeliste)
  • Klicken Sie auf ein beliebiges Element, um es abzuspielen
  • Mit „Automatisch weiter“ wird der nächste Titel abgespielt
  • Mit der Option „Wiederholen“ werden alle Titel nacheinander abgespielt

Position der Wiedergabeliste (Registerkarte „Einstellungen“, sichtbar bei 2 oder mehr Medienelementen):

WertErgebnis
Unterhalb des PlayersStandard – scrollbare Titelliste unter der Steuerleiste
Rechts vom PlayerDesktop-Layout: Player und Steuerelemente in der linken Spalte, Wiedergabeliste in der rechten Spalte (ab der 75rem Breite des Ansichtsbereichs). Bei schmaleren Ansichtsbereichen wird die Liste unterhalb des Players gestapelt

Die Umschaltfunktion für die Wiedergabeliste befindet sich in der rechten Steuerleiste (neben Untertiteln, Einstellungen und Vollbild). Bei sehr schmalen Bildschirmen wird sie möglicherweise in das Überlaufmenü verschoben, während „Zurück“, „Wiedergabe/Pause“, „Weiter“ und die Lautstärkeregelung sichtbar bleiben.

Live-Streams

HLS- und DASH-Live-Quellen (z. B. TV-Streams, die auf .m3u8) werden automatisch erkannt. Der Player führt dann Folgendes aus:

  • zeigt anstelle der Gesamtdauer ein „LIVE“-Symbol an
  • blendet die Steuerelemente für Neustart und Wiedergabegeschwindigkeit aus
  • zeigt die Schaltflächen „Live gehen“ und „Vorwärts springen“ nur an, wenn der Zuschauer hinter dem Live-Fortschritt zurückfällt
  • Hält Untertitel und das interaktive Transkript synchron, sobald neue Untertitel-Fragmente eintreffen

Import .m3u8 von URLs in einen Video-Mediendatensatz (nicht Audio), wenn der Stream Video enthält – VidPly berücksichtigt den Medientyp des Datensatzes auch dann, wenn die URL sowohl mit der Audio- als auch mit der Video-Zulassungsliste übereinstimmt.

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 die Elemente logisch an (per Ziehen neu anordnen)

Player-Steuerelemente

Visuelle Steuerelemente

SteuerungFunktion
Wiedergabe/PauseWiedergabe starten oder pausieren
LautstärkeLautstärke einstellen + stummschalten
FortschrittsbalkenZu einer bestimmten Stelle springen
Zum vorherigen/nächsten Titel springenVorheriges/nächstes in der Wiedergabeliste
CCUntertitel ein-/ausschalten
EinstellungenQualität, Geschwindigkeit, Untertitel
PiPBrowser-Bild-in-Bild (nativer Mini-Player)
VollbildIn den Vollbildmodus wechseln
 

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

 

Tastaturkürzel

TasteAktion
Leertaste oder KAbspielen/Pause
MStummschalten/Stummschaltung aufheben
FVollbild
CUntertitel ein-/ausschalten
10 Sekunden zurückspringen
10 Sekunden vorspulen
Lautstärke um 10 % erhöhen
Lautstärke um 10 % verringern
StartseiteZum Anfang
EndeZum Ende springen
?Hilfe zu Tastaturkürzeln öffnen (Dialogfeld)

Hilfe zu Tastaturkürzeln

Wenn die Tastatursteuerung 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 fokusgebundenes Dialogfeld zu öffnen, in dem alle aktiven Tastenkombinationen aufgelistet sind. Blenden Sie die Schaltfläche pro Mediendatensatz mit „Hilfe zu Tastaturkürzeln ausblenden“ aus (die ? 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 Beitragsbild und die Wiedergabetaste angezeigt
  2. Datenschutzerklärung: Erläutert, dass Daten an einen externen Dienst übermittelt 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 gesprochenem Text stets 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 die Einbindung von HLS- oder DASH-Streaming-Quellen für lange Inhalte
  • 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

ProblemLösung
Video wird nicht angezeigtÜberprüfen Sie, ob der Medieneintrag nicht ausgeblendet ist
Wiedergabeliste funktioniert nichtEs sind mindestens 2 Elemente erforderlich; überprüfen Sie die Browser-Konsole
Untertitel werden nicht geladenÜberprüfen Sie die VTT-Syntax; überprüfen Sie die CORS-Header
YouTube wird nicht geladenÜberprüfen Sie das URL-Format; leeren Sie den Cache
Datenschutzebene hängtTYPO3-Caches leeren; Laden von JS überprüfen
Datenschutzeinstellungen werden nicht angezeigtÜberprüfen Sie, ob der Datensatz „Privacy Layer Settings“ vorhanden ist und nicht ausgeblendet ist
Kein TonOption „Stummgeschaltet“ und Lautstärkeeinstellung überprüfen

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

AufgabeSchritte
Video hinzufügenListe → Neues VidPly-Medium → Video → Hochladen / Streaming-URL hinzufügen
Audio hinzufügenListe → Neues VidPly-Medium → Audio → Hochladen / Streaming-URL hinzufügen
YouTube hinzufügenListe → Neues VidPly-Medium → YouTube → URL einfügen
Untertitel hinzufügenMedien bearbeiten → Registerkarte „Untertitel“ → VTT oder SRT hinzufügen (SRT wird beim Speichern automatisch konvertiert)
Wiedergabeliste erstellenVidPly-Player → 2 oder mehr Elemente auswählen
Datenschutzeinstellungen konfigurierenListe → Einstellungen für Datenschutzebene → Datensatz erstellen
Datenschutz aktivierenAutomatisch für YouTube/Vimeo/SoundCloud

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

Seite teilen