VidPly

VidPly ist ein moderner, funktionsreicher Mediaplayer, der mit Vanilla ES6 JavaScript entwickelt wurde. Er kombiniert die besten Barrierefreiheitsfunktionen von AblePlayer mit den Streaming-Fähigkeiten von MediaElement.js und bietet vollständige WCAG 2.1 AA-Konformität sowie Unterstützung für 5 Sprachen.

Wichtigste Highlights

• Keine Abhängigkeiten – Reines Vanilla JavaScript, keine Frameworks erforderlich
• Barrierefreiheit an erster Stelle – WCAG 2.1 AA-konform mit vollständiger Unterstützung für Tastatur und Screenreader
• Mehrsprachig – Integrierte Übersetzungen für 5 Sprachen mit einfacher Erweiterbarkeit
• Vollständig anpassbar – CSS-Variablen und umfassende JavaScript-API
• Moderne Struktur – ES6-Module mit Tree-Shaking-Unterstützung
• Produktionsreif – Gründlich getestet mit realen Medieninhalten

Systemanforderungen

• Node.js 18+ für die Erstellung
• Moderne Browser: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
• iOS Safari 14+ und Android Chrome 90+

Unterstützung für Kernmedien

Barrierefreiheitsfunktionen (WCAG 2.1 AA)

Tastaturnavigation

• Alle Funktionen sind über die Tastatur zugänglich
• Benutzerdefinierte Tastenkombinationen für häufige Aktionen
• Menü-Navigation mit Pfeiltasten
• Logische Fokusreihenfolge mit sichtbaren Indikatoren

Unterstützung für Screenreader

• Vollständige ARIA-Labels (aria-controls, aria-expanded, aria-haspopup)
• Live-Bereiche für dynamische Ankündigungen
• Semantische HTML-Struktur

Interaktive Transkripte

• Klicken Sie auf eine beliebige Zeile, um zu dieser Stelle zu springen
• Durchsuchbarer Textinhalt
• Automatisches Scrollen während der Wiedergabe
• Ziehbares und in der Größe veränderbares Fenster

Überlagerung mit Gebärdensprache

• Bild-in-Bild-Anzeige
• Funktion zum Ziehen und Ändern der Größe
• Tastaturzugängliche Positionierung
• Unterstützung mehrerer Gebärdensprachen

Audiobeschreibung

• Alternative Audiospur mit Beschreibungen der visuellen Inhalte
• Umschalten zwischen Standard- und beschriebener Version

Zusätzliche Barrierefreiheit

• Anpassung des Stils von Untertiteln (Schriftart, Größe, Farbe, Deckkraft, Randstil)
• Unterstützung für den Modus mit hohem Kontrast (Windows HCM)
• Farbuabhängiges Design
• Mindestens 44 x 44 Pixel große Touch-Ziele für Mobilgeräte

Bildunterschriften und Untertitel

• WebVTT-Unterstützung – Standardformat für Untertitel
• Mehrere Sprachen – Unterstützung mehrerer Tonspuren mit einfacher Umschaltung
• Untertitelauswahl – Einfaches Umschalten zwischen Spuren über die CC-Taste
• Untertitel-Styling – Spezielles Styling-Menü
• Kapitelnavigation – Springen Sie zu den Kapiteln des Videos

Wiedergabefunktionen

• Einstellbare Geschwindigkeit – 0,25- bis 2-fache Wiedergabegeschwindigkeit
• Suchsteuerung – Vorwärts- und Rückwärtsnavigation
• Lautstärkeregelung – 0–100 % mit Stummschaltung
• Wiederholungswiedergabe – Einzelwiederholung oder Wiederholungswiedergabe der Wiedergabeliste
• Vollbildmodus – Native Vollbild-API mit intelligenter Wiedergabelisten-Überlagerung
• Bild-in-Bild – PiP-Unterstützung für Multitasking

Playlist-Funktionalität

• Audio-Wiedergabelisten mit Titelinformationen
• Videowiedergabelisten mit Miniaturansichten
• Steuerelemente „Zurück“ und „Weiter“
• Visuelles Wiedergabelistenfenster
• Automatischer Wechsel zum nächsten Titel
• Vollbildmodus – Horizontales Karussell im YouTube-Stil mit automatischer Ein-/Ausblendung
• Wischbare Touch-Oberfläche
• Responsives Kartenlayout

Internationalisierung

Integrierte Unterstützung für 5 Sprachen:

• Englisch (en)
• Spanisch (es) - Espanol
• Französisch (fr) - Francais
• Deutsch (de) - Deutsch
• Japanisch (ja)

Alle UI-Elemente sind vollständig übersetzt, einschließlich Steuerungsschaltflächen und Menüs, Zeitanzeige und Dauerformatierung, Tastaturkürzel, Fehlermeldungen und ARIA-Labels für Screenreader. Benutzerdefinierte Übersetzungen können über JSON- oder YAML-Dateien hinzugefügt werden.

Tastaturkürzel

Installation

Aus Quellcode erstellen

npm install
npm run build

Dadurch werden minimierte Dateien im Ordner dist/ erstellt.

ES-Modul (empfohlen)

<link rel="stylesheet" href="dist/vidply.min.css">
<script type="module">
import Player from ‚./dist/vidply.esm.min.js‘;
</script>

Traditioneller Script-Tag (IIFE)

<link rel="stylesheet" href="dist/vidply.min.css">
<script src="dist/vidply.min.js"></script>
<script>
const player = new VidPly.Player(‚#my-video‘, {
controls: true,
autoplay: false,
volume: 0.8,
language: ‚en‘
});
</script>

Grundlegende Verwendung

Videoplayer

<video data-vidply width="800" height="450">
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="captions-en.vtt" srclang="en" label="English">
</video>

Das Attribut data-vidply initialisiert den Player automatisch.

Audio-Player

<audio data-vidply>
<source src="audio.mp3" type="audio/mpeg">
</audio>

YouTube-Video

<video data-vidply src="https://www.youtube.com/watch?v=VIDEO_ID"></video>

Vimeo-Video

<video data-vidply src="https://vimeo.com/VIDEO_ID"></video>

HLS-Streaming

<video data-vidply src="https://example.com/stream.m3u8"></video>

Konfigurationsoptionen

JavaScript-API

Wiedergabesteuerung

player.play() // Wiedergabe starten
player.pause() // Wiedergabe pausieren
player.stop() // Stoppen und zurücksetzen
player.toggle() // Wiedergabe/Pause umschalten
player.seek(30) // Zu 30 Sekunden springen
player.seekForward(10) // 10 Sekunden vorwärts springen
player.seekBackward(10) // 10 Sekunden zurückspringen

Lautstärkeregelung

player.setVolume(0.5) // Lautstärke einstellen (0.0-1.0)
player.getVolume() // Aktuelle Lautstärke abrufen
player.mute() // Audio stummschalten
player.unmute() // Audio wieder einschalten
player.toggleMute() // Stummschaltung umschalten

Statusinformationen

player.getCurrentTime() // Aktuelle Zeit abrufen
player.getDuration() // Dauer abrufen
player.isPlaying() // Überprüfen, ob Wiedergabe läuft
player.isPaused() // Überprüfen, ob Pause läuft
player.isFullscreen() // Überprüfen, ob Vollbildmodus

Ereignis-Listener

player.on(‚ready‘, () => {})
player.on(‚play‘, () => {})
player.on(‚pause‘, () => {})
player.on(‚ended‘, () => {})
player.on(‚timeupdate‘, (time) => {})
player.on(‚volumechange‘, (volume) => {})
player.on(‚error‘, (error) => {})

Benutzerdefiniertes Styling

VidPly bietet umfangreiche CSS-Variablen für eine einfache Anpassung:

.vidply-player {
--vidply-primary-color: #3b82f6;
--vidply-background: rgba(0, 0, 0, 0.8);
--vidply-text-color: #ffffff;
--vidply-button-size: 40px;
--vidply-icon-size: 20px;
--vidply-radius-sm: 4px;
--vidply-radius-md: 8px;
--vidply-transition-fast: 150ms;
--vidply-transition-normal: 300ms;
}

Build-Ausgabe

• dist/vidply.esm.min.js – ES-Modul (Produktion, ~50 KB)
• dist/vidply.min.js – IIFE-Bundle (Produktion, ~52 KB)
• dist/vidply.min.css – Stile (minimiert, ~12 KB)

Gesamt: ~62 KB unkomprimiert, ~18 KB gzippt

Optimierung für Mobilgeräte

VidPly ist standardmäßig mobilfreundlich mit einem Breakpoint bei 768px:

• Das Transkriptfenster wird unterhalb des Videos angezeigt (nicht verschiebbar)
• Optimierte Steuerleiste mit Überlaufmenü
• Touch-freundliche Benutzeroberfläche mit einer Mindestgröße von 44 px für Touch-Ziele
• Lautstärkeregelung über Hardwaretasten (Standardverhalten bei Mobilgeräten)
• Pseudo-Vollbildmodus für iOS Safari-Kompatibilität

Live-Demos

• Hauptdemo – Voll ausgestatteter Videoplayer
• Audio-Wiedergabeliste – Audio-Player mit Wiedergabelistenunterstützung
• HLS-Streaming – Demo zum adaptiven Bitraten-Streaming

Credits

Inspiriert von:

• AblePlayer – Barrierefreiheitsfunktionen
• MediaElement.js – Streaming-Unterstützung

Lizenz und Autor

VidPly wird unter der GNU General Public License v2.0 oder höher veröffentlicht. Entwickelt von Matthias Peltzer.