VidPly

VidPly ist ein moderner, funktionsreicher Mediaplayer, der mit Vanilla ES6 JavaScript entwickelt wurde. Er bietet WCAG 2.1 AA-Konformität sowie Unterstützung für 5 Sprachen. Hat einen Light- und Dark-Mode integriert und noch viele andere Funktionalitäten.

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
• Light und Darkmode – umschalten zwischen hellem und dunklem Theme
• Vollständig anpassbar – CSS-Variablen und umfassende JavaScript-API
• Moderne Struktur – ES6-Module mit Tree-Shaking-Unterstützung
• Getestet – Gründlich getestet mit realen Medieninhalten

Live-Demos ansehen | GitHub-Repository

Systemanforderungen

• Node.js 18+ für die Erstellung (empfohlen Node 24)
• 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)
• Farbunabhängiges Design
• Mindestens 44 × 44 Pixel große Touch-Ziele für Mobilgeräte

Untertitel und Bildunterschriften

• 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 Wiederholung der Wiedergabeliste
• Vollbildmodus – Native Fullscreen-API mit intelligenter Wiedergabelisten-Überlagerung
• Bild-in-Bild – PiP-Unterstützung für Multitasking

Playlist-Funktionalität

• Audio-Wiedergabelisten mit Titelinformationen
• Video-Wiedergabelisten mit Miniaturansichten
• Gemischte Medien-Wiedergabelisten – Audio und Video in einer Playlist kombiniert
• 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

Audio-Playlist-Demo | Video-Playlist-Demo | Gemischte Medien-Demo

Internationalisierung

Integrierte Unterstützung für 5 Sprachen:

• Englisch (en)
• Spanisch (es) – Español
• Französisch (fr) – Français
• 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/prod/vidply.esm.min.js';
</script>

Traditioneller Script-Tag (IIFE)

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

Grundlegende Verwendung

Videoplayer

<video data-vidply width="800" height="450">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="captions-de.vtt" srclang="de" label="Deutsch">
</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>

HLS-Streaming-Demo ansehen

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 pausiert
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('playbackspeedchange', (speed) => {})
player.on('fullscreenchange', (isFullscreen) => {})
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/prod/vidply.esm.min.js – ES-Modul (Produktion)
• dist/legacy/vidply.min.js – IIFE-Bundle (Produktion)
• dist/vidply.min.css – Stile (minimiert)

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
• Video-Wiedergabeliste – Video-Playlist mit Miniaturansichten
• Gemischte Medien – Kombinierte Audio- und Video-Playlist
• 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.

GitHub-Repository | Dokumentation