Änderungsprotokoll

Das Format basiert auf „Keep a Changelog“, und dieses Projekt hält sich an die Regeln des Semantic Versioning.

[1.2.1] – 14.06.2026

Hinzugefügt

• VTT-Sprachbeschreibung (erweiterte AD) hinzugefügt: Wenn kein beschreibendes Video konfiguriert ist, kann VidPly kind="descriptions" WebVTT-Cues über die Browser-API speechSynthesis — dabei wird die Wiedergabe bei jedem Cue angehalten und nach Beendigung der Sprachausgabe fortgesetzt (DescriptionSpeechManager).
• Bereitstellungsmodi für Audiobeschreibungen über audioDescriptionMode: auto (Standard), swap, vtt_speech. Bei autohat eine beschriebene MP4-/WebM-Quelle Vorrang vor der VTT-Sprache.
• Neue Optionen: audioDescriptionSpeech (TTS aktivieren/deaktivieren), audioDescriptionExtended (Fortsetzung nach Ende der Sprachausgabe statt zum Ende der Cue-Zeit).
• Neue Ereignisse: audiodescriptioncuestart, audiodescriptioncueend.
• Demo: demo/single-player-vtt-speech.html — VTT-AD nur mit Sprache ohne Austausch des beschriebenen Videos.

[1.2.0] – 04.06.2026

Wartungsrelease zur Umsetzung der Ergebnisse einer internen Codeüberprüfung. Es wurden keine öffentlichen APIs entfernt; die Änderungen umfassen Verbesserungen der Barrierefreiheit, Behebung von Speicherlecks, Verringerung der Bundle-Größe und strengere Typisierung.

Barrierefreiheit

• Menü-Semantik (1.1.1 / 4.1.2): Deaktivierte und leere Menüeinträge werden nun vom wandernden Fokus (Pfeiltasten) ausgeschlossen, sodass Screenreader- und Tastaturbenutzer nicht mehr auf nicht-interaktiven Elementen landen.
• Menüs mit Einzelauswahl (4.1.2): Die Menüs „Geschwindigkeit“, „Qualität“ und „Untertitel“ bieten nun role="menuitemradio" mit aria-checked statt nur mit einem visuellen Häkchen.
• Pinch-Zoom wiederhergestellt (1.4.4 / 1.4.10): Der Pseudo-Vollbildmodus (iOS) setzt nicht mehr maximum-scale=1.0, user-scalable=no, sodass der Zoom nicht mehr blockiert wird, während der Player den Viewport ausfüllt.
• Live-Ansagen (4.1.3): Durch Maus- oder Touch-Eingaben ausgelöste Änderungen bei Wiedergabe/Pause, Untertiteln und Lautstärke werden nun angesagt (bisher nur über die Tastatur), und das Overlay für den Untertitelhinweis enthält einen aria-live Bereich.
• Fokus-Traps: Das interaktive Transkriptfenster und der Einstellungsdialog halten nun den Fokus, solange sie geöffnet sind, und geben ihn beim Schließen wieder an den Auslöser zurück.
• Reduzierte Bewegung (2.3.3): scrollIntoView({ behavior: 'smooth' }) In Menüs, der Steuerleiste, dem Untertitel-Overlay und dem Transkript werden Bewegungen nun hinter prefers-reduced-motion.
• Zielgröße (2.5.8): Die Größenänderungsgriffe für den schwebenden Player und das Transkript sowie die Bereichsmarkierungen wurden vergrößert, um das Minimum von 24×24 CSS-Pixeln zu erfüllen.
• Escape-Behandlung: Die Escape-Handler für den schwebenden Player sowie für das Ziehen und die Größenänderung sind so angeordnet und begrenzt, dass der Modus zum Ziehen und zur Größenänderung per Tastatur abgebrochen werden kann, ohne den Player sofort zu schließen.

Leistung

• Kleineres Kern-Bundle: Der Panel-Builder im Untertitel-Stil wurde in ein verzögert importiertes Modul ausgelagert (controls/CaptionStyleMenu), sodass es erst beim ersten Öffnen des Panels abgerufen wird, anstatt im stets geladenen Kern enthalten zu sein.
• Gemeinsamer SDK-Loader: Ein neuer utils/ScriptLoader.loadScriptOnce(url, { integrity }) vereinfacht die fünf separaten SDK-Einbindungsroutinen (hls.js, dash.js, YouTube, Vimeo, SoundCloud) und verhindert doppelte <script> Tags, wenn mehrere Player auf einer Seite eingebunden werden.
• CSS-Deduplizierung: Die doppelten .vidply-fullscreen / :fullscreen Selektorpaare zusammengefasst und :is(.vidply-fullscreen, :fullscreen), das helle Design in die bestehenden --vidply-* Variablen integriert, doppelte Keyframes zusammengeführt und die Blöcke zur Größenanpassung von Transkripten/Gebärdensprache dedupliziert. Das minimierte CSS ist ~102 KB groß.

Behoben

• Speicherlecks beim Abbau des Renderers: HTML5Renderer.destroy() Zuvor wurden removeEventListener mit neuen leeren Funktionen aufgerufen, sodass loadedmetadata / play / pause / timeupdate und zugehörige Listener wurden nie entfernt. Alle Renderer und Manager registrieren Listener nun über eine instanzspezifische AbortController und trennen diese bei destroy().
• Nicht nachverfolgte Timer: HLS-Timer für Untertitel-Wiederholversuche und Netzwerkfehler-Wiederholversuche, der SoundCloud-Initialisierungs-Timeout sowie die verschachtelten AudioDescription-Timeouts für den Untertitelwechsel werden nun nachverfolgt und beim Teardown zurückgesetzt.
• Listener-Leck im PlaylistManager: Alle im init() , werden nun bei destroy() (bisher waren es nur zwei davon).
• SignLanguageManager: Der Listener für den Klick auf die Schließen-Schaltfläche wird nun während der Bereinigung entfernt.
• Einbettungsinitialisierung: YouTube- und Vimeo-Renderer lehnen nun den Vorgang ab, wenn ihr SDK nicht geladen werden kann, anstatt so zu verhalten, als ob die Initialisierung erfolgreich verlaufen wäre.

Codequalität

• HLS-Native-Pfad: Das anfällige Prototyp-Grafting bei HLSRenderer.initNative durch eine explizite Komposition ersetzt, die an eine interne HTML5Renderer.
• Renderer Schnittstelle delegiert: Interne Flags (_hlsSourceLoaded, _dashSourceLoaded, _didDeferredLoad) aus der öffentlichen Schnittstelle entfernt.
• Strengeres TypeScript: Aktiviert noUnusedLocals und noUncheckedIndexedAccess und alle daraus resultierenden Stellen korrigiert (der Zugriff auf Array-/Objektindizes wird nun durchgehend geschützt). Die Typprüfung ist fehlerfrei und alle Unit-Tests werden bestanden.

[1.1.19] – 29.05.2026

Geändert

• Voreingestellte CDN-Adressen für hls.js / dash.js festgelegt: Standard-Fallback-URLs laden nun hls.js 1.6.16 und dash.js 5.2.0 (moderner UMD-Build). Überschreiben wie hlsScriptUrl / dashScriptUrl wie bisher.

[1.1.10] – 03.05.2026

Sicherheit

• XSS-Absicherung bei Untertiteln (AUDIT-001): Der Cue-Text wird nun ausschließlich textContent exclusively dargestellt. Der veraltete auf regulären Ausdrücken basierende DOMUtils.sanitizeHTML + innerHTML Pfad wurde entfernt; VTT-spezifisches Markup (<c>, <b>, <i>, <u>, <v>) wird stattdessen in eine strukturierte DOM-Whitelist geparst.
• Strenge URL-Whitelist für SoundCloud (AUDIT-005): SoundCloudRenderer.isValidSoundCloudUrl wird nun mit dem URL-Konstruktor geparst und das hostname + https: Schema.
• Gepinnte hls.js / dash.js mit optionalem SRI (AUDIT-006): Renderer laden nun die exakten Versionen von hls.js (1.5.18) und dash.js (5.1.1). Die CDN-URL und das integrity Attribut sind über die neuen hlsScriptUrl / hlsScriptIntegrity / dashScriptUrl / dashScriptIntegrity Optionen konfigurierbar. SRI ist optional, um zu vermeiden, dass Hash-Drift Installationen bei Upgrades von Abhängigkeiten beeinträchtigt; SECURITY.md dokumentiert, wie der Hash berechnet wird.
• Automatische Initialisierung der JSON.parse-Absicherung (AUDIT-004): data-vidply-options wird nun innerhalb von `try/catch` mit strukturierter Warnung geparst, anstatt einen Fehler auszulösen.
• „mediaType“-Whitelist (AUDIT-014): Der Konstruktor lehnt nun alles ab, was nicht video / audio.
• Metadaten-Direktiven sind nun aktivierbar (AUDIT-013): FOCUS: / #hashtag Cue-Direktiven erfordern metadataDirectives: true und sind standardmäßig auf den Player-Container beschränkt.
• Absicherung gegen Pfadtraversal auf Entwicklungsservern (AUDIT-002): server.js und server.cjs Auflösung von Pfaden unter einem festen Stammverzeichnis sowie Ablehnung von Escapes; beide Dateien werden zudem dem .gitignore.
• AbortController für vom Benutzer ausgelöste Abrufe (AUDIT-017): Transkript-Downloads, das Laden von Sprachdateien, das Herunterladen von Metadaten per HEAD sowie validateTrackExists sind nun durch einen pro Player AbortController mit AbortSignal.timeout.
• sicheren localStorage-Nutzdaten begrenzt (AUDIT-023): StorageManager validiert die Struktur des geparsten JSON und begrenzt numerische Bereiche für Positionen/Lautstärke.
• Absicherung gegen Prototyp-Verunreinigungen (AUDIT-022): i18n-Übersetzungen verwenden nun Object.create(null) und lehnen __proto__ / constructor Schlüssel.

Barrierefreiheit

• Lokalisierte SR-Ansagen (AUDIT-007): KeyboardManager.announceAction laufen nun über i18n; neue Schlüssel player.playing, player.paused, player.muted, player.unmuted, player.captionsOn, player.captionsOff, player.exitFullscreen, player.volumePercent, player.speedRate für en/de/es/fr/ja.
• Die Gestaltung der Beschriftung missbraucht „role="menu"“ nicht mehr (AUDIT-008): Das Bedienfeld ist nun ein beschriftetes role="dialog" mit Fokus- Falle und „Escape“-Schließfunktion.
• Instanzspezifischer Live-Bereich (AUDIT-032): Die Ansager-ID enthält nun den Player instanceId.
• Transkriptzeilen sind echte „<button>“-Elemente mit lokalisierten Beschriftungen (AUDIT-033).
• aria-valuetext am Lautstärkeregler (AUDIT-038) und Page{Up,Down}, Home, End Schaltflächen auf dem Fortschrittsbalken ( AUDIT-039).
• Wiederherstellung des Fokus im Einstellungsdialog (AUDIT-031): Der Fokus kehrt beim Schließen nun zum Auslöseelement zurück.
• Korrektur der Demo-lang="ja" (AUDIT-030): demo/demo-jp.html deklariert nun das korrekte BCP-47-Tag.

Codequalität

• Listener-/Instanz-Registry-Lecks in der destroy() behoben (AUDIT-003): Player und ControlBar jeder window / document Listener über eine instanzspezifische AbortController, Splice von Player.instancesund Kaskaden-Löschung playlistManager / audioDescriptionManager.
• Player Typisierung verschärft (AUDIT-019, AUDIT-036): Instanzfelder verwenden nun PlayerOptions / PlayerState / Renderer; seek / setVolume / setPlaybackSpeed / load „accept“ number / typisierte Konfigurationen und werden über Number.isFinite.
• (Player as any).observeLazy → statische Methode begrenzt (AUDIT-020).
• Typisierung dynamischer Feature-Loader (AUDIT-018).
• i18n-Platzhalter-Regex mit Escape-Zeichen versehen (AUDIT-021).
• Leere „catch“-Anweisungen werden nun unter „options.debug“ protokolliert (AUDIT-037).

Dokumentation

• README/CHANGELOG mit Versionsangaben (AUDIT-027), Browser-Matrix an esbuild-Ziel angepasst (AUDIT-028), Standardwerte abgestimmt (AUDIT-029), playlisttrackchange / floatingchange Ereignisse dokumentiert (AUDIT-010, AUDIT-011), falscher API- Name korrigiert (AUDIT-009).
• Neue „SECURITY.md“, „CONTRIBUTING.md“ und „CODE_OF_CONDUCT.md“ (AUDIT-048), engines.node deklariert (AUDIT-034), prepublishOnly Skript hinzugefügt (AUDIT-045), Reproduzierbarkeit des Banners behoben (AUDIT-046).
• Lautstärkeschritt in KEYBOARD.md auf 10 % korrigiert (AUDIT-043). Angabe zur „durchsuchbaren“ Transkription in der README-Datei bis zur Implementierung entfernt (AUDIT-042). Sprache der Touch-Ziele in der README-Datei an CSS angepasst (AUDIT-040).

[1.1.8] – 02.05.2026

Hinweis

Interne Version, die während des auditgesteuerten Hardening-Sprints verwendet wurde; durch 1.1.10 ersetzt. Keine öffentlichen API-Änderungen zwischen 1.1.7 und 1.1.8.

[1.1.7] – 20.04.2026

Hinzugefügt

• Benutzerdefinierter schwebender Player („Own PiP“ / Miniplayer): Optionaler, seiteninterner, schwebender Player, der die native Picture-in-Picture-Funktion des Browsers ersetzt.
  • Wird automatisch schwebend angezeigt, wenn der ursprüngliche Player aus dem Sichtbereich herausgescrollt wird (über IntersectionObserver) und dockt automatisch an, wenn er wieder in den Sichtbereich scrollt.
  • Manuelles Anheften/Lösen über die vorhandene PiP-Schaltfläche. Das manuelle Anheften/Lösen überschreibt das scrollbasierte Verhalten bis zur nächsten vom Benutzer ausgelösten play.
  • Schließen-Schaltfläche die Wiedergabe pausiert, das Video in seinen ursprünglichen Container zurückversetzt und das automatische Anheften für den Rest der Wiedergabesitzung unterdrückt.
  • Vollständig verschiebbar und in der Größe anpassbar (DraggableResizable Dienstprogramm); die Geometrie wird pro Player über StorageManager.
  • Reduzierte Steuerleiste innerhalb der schwebenden Hülle: Nur Wiedergabe/Pause, Zurückspulen, Vorspulen, Lautstärke, Untertitel, PiP und Vollbild sind sichtbar. Tooltips öffnen sich über den Schaltflächen; Untertitel werden auf font-size: 90% und width: 95%.
  • Das native PiP des Browsers wird automatisch unterdrückt (disablePictureInPicture + disableRemotePlayback), solange der schwebende Modus aktiviert ist, wodurch den Nutzern eine einheitliche Benutzererfahrung über alle Browser hinweg geboten wird.
  • Standardmäßig nur auf dem Desktop: Die Funktion ist unter floatingMinViewportWidth (Standard 768px) und die Schaltfläche für das schwebende PiP-Fenster ist aus dem Überlaufmenü ausgeschlossen, sodass sie auf Mobilgeräten niemals angezeigt wird.
  • Audio (<audio>) werden automatisch übersprungen.
  • Das Gebärdensprachen-Overlay wird zwangsweise geschlossen, solange die schwebende Shell aktiv ist, und beim Beenden wieder aktiviert.
  • Barrierefrei: Die schwebende Shell verwendet role="dialog" mit übersetztem aria-label; die PiP-Umschaltung verwendet aria-pressed; der Fokus wird beim Schließen wieder auf die ursprüngliche Schaltfläche zurückgesetzt.
• Neue Optionen:
  • floating: boolean (Standard false) / data-vidply-floating="true"
  • floatingPosition: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' (Standard 'bottom-right') / data-vidply-floating-position="..."
  • floatingMinViewportWidth: number (Standard 768) / data-vidply-floating-min-viewport-width="..."
• Neue Übersetzungsschlüssel: player.floatingPlayer, player.floatingPlayerClose, player.floatingPlayerEnter, player.floatingPlayerExit, player.floatingPlayerDialog für alle integrierten Sprachen (en, de, es, fr, ja).
• Unit-Tests: 20 neue Vitest-Tests, die tests/unit/FloatingPlayerManager.test.js die folgende Bereiche abdecken: Enter/Exit, manuelles Anheften/Lösen, automatisches Float beim Herausscrollen, Unterdrückung des manuellen Lösens, Viewport-Schutz und Bereinigung.

Geändert

• Vollbild-Schaltfläche befindet sich nun in jedem Viewport dauerhaft außerhalb des Überlaufmenüs (overflowPriorityMobile = 1) und wird in der DOM-Reihenfolge hinter der Schaltfläche für das Überlaufmenü eingefügt, sodass auf Mobilgeräten das Steuerelement ganz rechts immer „Vollbild“ ist und das Überlaufmenü direkt links davon liegt.
• .vidply-controls-right verwendet nun justify-content: flex-end , sodass Schaltflächen auf der rechten Seite auch dann zuverlässig rechtsbündig ausgerichtet werden, wenn sich der Container auf Mobilgeräten auf die volle Breite ausdehnt.
• .vidply-overflow-menu erzwingt nicht mehr margin-left: auto / order: 999; die neue DOM-Reihenfolge in Verbindung mit der Ausrichtung „flex-end“ sorgt für eine natürliche Positionierung.

[1.1.3] – 19.04.2026

Behoben

• HLS-Untertitel-Synchronisation: Die hls.js Untertitel-Spur bei Sprachwechsel und Reaktion darauf textcuesupdate , sodass die aktive Untertitelspur stets mit der Auswahl des Benutzers übereinstimmt.
• HLS-Untertitel-Fragmente: Auf Hls.Events.SUBTITLE_FRAG_PROCESSED und senden Sie textcuesupdate , sodass Transkripte und Live-Untertitel aktualisiert werden, sobald neue Untertitel-Fragmente heruntergeladen werden (keine abgeschnittenen Transkripte mehr bei langen Streams).

[1.1.1] – 18.04.2026

Hinzugefügt

• Puffer-Ladeanzeige: Zentrierte, barrierefreie Ladeanzeige, die immer dann erscheint, wenn die Medien gepuffert werden (waiting, seeking, anfänglich loadstart) und verschwindet bei canplay/playing. Implementiert für HTML5-, HLS- und DASH-Renderer.
  • Wird über die vidply-buffering Klasse auf dem Player-Container; verwendet das .vidply-loading Element, das durch Player.createBufferingLoadingOverlay().
  • „z-index“ unterhalb des Wiedergabe-Overlays liegt (--vidply-z-buffering: 1), sodass der Spinner die Interaktion mit dem Mauszeiger niemals behindert.
  • Beachtet prefers-reduced-motion (keine Rotationsanimation, wenn „Reduced Motion“ bevorzugt wird).

[1.1.0] – 17.04.2026

Geändert

• TypeScript-Migration: Der gesamte src/ Baum von ES-Modulen (.js) in striktes TypeScript (.ts).
  • Alle Renderer, Manager, Steuerelemente, i18n-Komponenten, Hilfsprogramme und core/Player sind nun .ts.
  • tsconfig.json ist auf strict: true mit noImplicitAny, strictNullChecks, noImplicitReturns.
  • Build-Pipeline aktualisiert: esbuild bündelt TypeScript direkt zu ESM und IIFE; tsc --emitDeclarationOnly schreibt Typ deklarationen in dist/types/.
  • package.json macht types: "dist/types/index.d.ts" , sodass Nutzer vollen IntelliSense-Zugriff erhalten, ohne dass ein zusätzliches @types Paket.
  • Neue Skripte: npm run build:types, npm run typecheck.
• Alle internen Importe verwenden Pfade ohne Erweiterung (z. B. import { Player } from './core/Player') und stützen sich auf tsconfigmoduleResolution.

Hinzugefügt

• Puffer-Spinner (erste Implementierung): Ein zentrierter Lade-Spinner wird angezeigt, bis die Medien abgespielt werden können, und ersetzt den bisherigen statischen Text „Wird geladen…“.

Hinweise zur Migration

• Keine Änderungen an der öffentlichen API für Endnutzer. Wenn Sie einzelne Dateien src/ direkt importiert haben (z. B. src/renderers/HTML5Renderer.js), aktualisieren Sie den Pfad auf .ts (oder lassen Sie die Erweiterung ganz weg) und stellen Sie sicher, dass Ihr Bundler TypeScript verarbeiten kann.
• TypeScript-Anwender können nun Typen direkt importieren:

  import type { PlayerOptions, RendererType } from 'vidply';
  

[1.0.51] – 15.04.2026

Hinzugefügt

• Download-Schaltfläche: Neues optionales Steuerelement in der Steuerleiste zum Herunterladen der aktuellen Mediendatei.
  • Aktiviert über downloadButton: true (Standard false) oder data-vidply-download-button="true".
  • benutzerdefinierte URL über downloadUrl: '...' / data-vidply-download-url="...". Greift auf die aktuelle Mediendatei zurück src , wenn nicht angegeben.
  • Vollständig internationalisiert (player.download Übersetzungsschlüssel) und per Tastatur bedienbar.

[1.0.50] – 14.04.2026

Hinzugefügt

• SoundCloud-Renderer hinzugefügt: Erstklassige SoundCloud-Wiedergabe über die SoundCloud-Widget-API.
  • Wird automatisch für jede URL erkannt, die soundcloud.com (keine data-renderer erforderlich).
  • Einheitliche Steuerelemente für Wiedergabe/Pause, Spulspringen, Lautstärke, Stummschaltung und Fortschrittsanzeige; lässt sich genau wie bei YouTube/Vimeo in die VidPly-Benutzeroberfläche integrieren.
  • Die Datenschutzschicht (in mpc-vidply) unterstützt SoundCloud von Haus aus (DSGVO-Einwilligung vor dem Laden des Iframes).
• Apple HLS Native TextTrack Bridge: Auf iOS/iPadOS, wo hls.js nicht ausgeführt werden kann, funktionieren Untertitel, Transkript und Qualitätssteuerung nun über die native HLS- TextTrack API.
  • Wartet auf addtrack / removetrack / loadedmetadata (entprellt), sodass Untertitelvarianten im Untertitelmenü und im Transkriptbereich angezeigt werden.
  • Verwendet dieselbe Benutzeroberfläche für Untertitel und Transkripte wie hls.js für eine einheitliche Benutzererfahrung.
  • canPlayNatively() beschränkt nun den nativen Pfad ausschließlich auf iOS / iPadOS; der Desktop-Safari unter macOS nutzt hls.js für vollständige Funktionsparität (Qualitätsmenü, erweiterte Untertitel-Gestaltung).
• Vollbild-Menüschaltfläche unter iOS: Die Schaltfläche „Einstellungen/Menü“ bleibt im iOS-Vollbildmodus sichtbar.

Behoben

• Untertitel und Transkripte verschwinden bei iOS-HLS-Streams nicht mehr.
• Das Qualitätsmenü wird bei iOS-HLS-Streams angezeigt, wenn mehrere Renditionen verfügbar sind.

[1.0.45] – 12.04.2026

Hinzugefügt

• MPEG-DASH-Streaming: Vollständige DASH-Unterstützung über dash.js (wird bei Bedarf vom CDN geladen)
  • Adaptive Auswahl der Bitrate über ein Qualitätsmenü
  • Rendering von TTML-/STPP-Untertiteln nativ an dash.js delegiert
  • Unterstützung für WebVTT-Untertitel mit vollständiger Formatierung der Untertitel und interaktivem Transkript
  • Automatische Renderer-Auswahl für .mpd URLs
  • Unterstützung für verzögertes Laden (deferLoad: true)
  • Robuste Fehlerbehebung und kontrollierter Abbruch des Streams (dash.reset() vor dash.destroy())
  • TTML-Rendering-Div angehängt, bevor dash.initialize() , um Race-Conditions zu vermeiden
  • Qualitätsbezeichnungen enthalten zur Eindeutigkeit die Bitrate (z. B. „720p (1427 kbps)“)
  • supportsAutoQuality() sowie isAutoQuality() für die automatische Umschaltung der Qualität
  • handlesOwnCaptions() um die Darstellung von TTML-Untertiteln an dash.js zu delegieren
• Einheitliche Aktualisierungen der Text-Cues: Neues textcuesupdate Ereignis, das sowohl von HLS- als auch von DASH-Renderern für dynamische Transkript- Aktualisierungen
• HLS-Cue-Update-Abfrage: Der HLS-Renderer sendet nun textcuesupdate für inkrementell geladene WebVTT-Untertitel-Segmente (behebt das Abschneiden von Transkripten)
• Neue hideSpeedForDash Option zum Ausblenden der Wiedergabegeschwindigkeitssteuerung für DASH-Streams
• Demo-Seiten: single-player-dash.html und dash-test.html mit mehreren DASH-Test-Streams
• Unit-Tests für DASHRenderer (Initialisierung, Qualitätsmanagement, Untertitelverarbeitung, Fehlerbehebung, Bereinigung)

Verändert

• CaptionManager.updateCaptions() überlässt die Verarbeitung nun Renderern, die ihre eigenen Untertitel (TTML) verarbeiten
• TranscriptManager wartet auf generische textcuesupdate Ereignis (ersetzt dashtextcuesupdate)
• preventDragOnElement stoppt nun auch die pointerdown die Weiterleitung (behebt das Problem mit dem Kontrollkästchen „Autoscroll“ im Transkript)
• Veraltete TextTrack Filterung (_vidplyStale Flag) verhindert Geistertracks nach dem Streamwechsel

Behoben

• Das Kontrollkästchen „Autoscroll“ im Transkriptfenster konnte aufgrund einer DraggableResizable Fehler pointerdown
• SourceBuffer append failed "InvalidStateError" Fehler beim DASH-Streamwechsel
• Race-Condition beim TTML-Rendering, die zu Warnungen wie „Untertitel können nicht angezeigt werden“ führte
• HLS-Transkript endete vorzeitig (z. B. „bipbop“ bei 01:11) aufgrund des inkrementellen Ladens von Untertiteln
• Das Qualitätsmenü zeigt keine differenzierten Stufen für Streams mit gleicher Auflösung, aber unterschiedlicher Bitrate an
• Schaltflächen der Steuerleiste werden beim Wechsel zwischen DASH-Streams nicht korrekt aktualisiert

[1.0.44] – 03.04.2026

Geändert

• WCAG 2.2 AA-Konformität: Das Barrierefreiheitsziel wurde von WCAG 2.1 AA auf WCAG 2.2 AA angehoben

Behoben

• Zielgröße (WCAG 2.2 SC 2.5.8): Es wurde sichergestellt, dass alle interaktiven Ziele die Mindestgröße von 24 × 24 CSS-Pixeln erfüllen
  • Fortschrittsbalken: Transparenter ::before Trefferbereich hinzugefügt (9 px visuell → 24 px Ziel)
  • Fortschrittsbalken-Zugriffspunkt: Von 15 px auf 24 px vergrößert
  • Lautstärkeregler: Horizontaler Abstand für 24-px-Touch-Zielfläche erweitert
  • Lautstärkeregler: Von 10 px auf 24 px vergrößert
  • Größenänderungsgriffe (Ecken): Von 16 px auf 24 px vergrößert
  • Größenänderungs-Ziehpunkte (Kanten): Auf der schmalen Achse von 8 px auf 24 px vergrößert
• Ziehbewegungen (WCAG 2.2 SC 2.5.7): Es wurde überprüft, dass alle Ziehvorgänge über Alternativen für die Bedienung mit einem einzigen Zeiger ohne Ziehen verfügen
  • Transkript-/Gebärdensprache-Fenster: Umschaltung über Tastaturtasten D/R/Home/Esc sowie über das Einstellungsmenü
  • Fortschrittsbalken: „Klicken zum Springen“ + Pfeiltasten der Tastatur
  • Lautstärkeregler: Klicken zum Einstellen + Pfeiltasten „Auf“/„Ab“
  • Playlist-Karussell: Natives CSS-Scrollen + Schaltflächen „Zurück“/„Weiter“

Dokumentation

• Aktualisierte Verweise auf die WCAG-Konformität von 2.1 auf 2.2 in der README-Datei, im Benutzerhandbuch und im Leitfaden „Erste Schritte“

[1.0.40] – 21.02.2026

Hinzugefügt

• Dynamische HLS-Untertitelverarbeitung: Automatische Erkennung und Laden von Untertitelspuren aus HLS-Manifesten
• Korrekturen und Verbesserungen am hellen Design
• Das Copyright-Jahr wurde auf 2026 aktualisiert

Behoben

• Entferntes, blockiertes Akamai-Video von der HLS-Stream-Demo-Seite

[1.0.39] – 20.02.2026

Behoben

• Überlauf des Transkript-Dialogfelds (WCAG 1.4.10): Probleme mit dem Überlauf des Transkript-Dialogfelds bei Videoplayern in voller Breite wurden behoben, wodurch die ordnungsgemäße Einhaltung der Reflow-Richtlinien sichergestellt wird

[1.0.38] – 19.02.2026

Behoben

• Browser-Fallback-Meldung entfernt
• HTML5-Validierungsfehler bei Barrierefreiheit und Medienelementen

Geändert

• esbuild auf Version 0.27.3 aktualisiert

[1.0.37] – 18.02.2026

Hinzugefügt

• Testinfrastruktur: Vitest für Unit-Tests und Playwright für End-to-End-Tests hinzugefügt
• Anzeigemodus für Gebärdensprache: Neue Option für den Anzeigemodus des Gebärdensprache-Overlays
• Neues Bild-in-Bild-Symbol (PiP) für das Gebärdensprachfenster
• Demo-Seiten für Einzelplayer und Wiedergabelisten zum Testen

Behoben

• Schließt den Vollbildmodus beim Klicken auf externe Medien in der Vorschau-Liste der Wiedergabeliste

[1.0.36] – 17.02.2026

Behoben

• Umfassende Verbesserungen im Vollbildmodus: Mehrere Korrekturen zum Vollbildverhalten auf verschiedenen Geräten

[1.0.35] – 16.02.2026

Behoben

• Höhe des mobilen Überlaufmenüs bei Positionierung unterhalb der Auslösetaste
• Handhabung des Seitenverhältnisses nur für Vimeo- oder YouTube-Ebenen hinzugefügt
• Verbesserungen im Tastatur-Ziehmodus
• Mehrere Fehlerbehebungen bei iOS-Wiedergabelisten
• Unterstützung für Gebärdensprache per Touch: Ziehen und Größenänderung per Touch für Gebärdensprache-Overlays über Pointer-Events aktiviert

[1.0.34] – 15.02.2026

Behoben

• Anzeige von Audio-Coverbildern in gemischten Wiedergabelisten, wenn ein Posterbild verfügbar ist

[1.0.33] – 14.02.2026

Hinzugefügt

• Verzögertes Laden: Bei der Auswahl einer Wiedergabeliste werden Metadaten nun ohne automatische Wiedergabe geladen
• Anzeige der anfänglichen Dauer, bevor die Metadaten der Medien geladen werden
• Lazy Loading für Audio-, Video- und HLS-Dateien (Laden erst bei Wiedergabe)

Geändert

• Aktualisierte Dokumentation und Demodateien

[1.0.32] – 13.02.2026

Behoben

• Ausblenden der Geschwindigkeitssteuerung für HLS-Streams (erkannt anhand der .m3u8-Quell-URL)
• Veralteter JavaScript-Code entfernt

[1.0.31] – 12.02.2026

Hinzugefügt

• Vorschau-Miniaturbilder: Video-Vorschau-Miniaturbilder beim Bewegen des Mauszeigers über den Fortschrittsbalken
• Automatische Poster-Erstellung: Automatische Erstellung von Posterbildern aus Videos für Wiedergabelisten

[1.0.30] – 11.02.2026

Hinzugefügt

• Vorschaubilder: Video-Vorschaubilder und automatische Poster-Erstellung für einzelne Videos

Geändert

• esbuild-Abhängigkeit aktualisiert

[1.0.29] – 10.02.2026

Behoben

• Vertauschung der Untertitelspuren für Audiodeskriptionen in Wiedergabelisten

Hinzugefügt

• Transkriptbeschreibungen: Beschreibungen im Transkript immer anzeigen und Spuren bei Videos mit Audiobeschreibung vertauschen

[1.0.28] – 09.02.2026

Behoben

• Fehlende Übersetzungsstrings hinzugefügt

[1.0.27] – 08.02.2026

Hinzugefügt

• Unterstützung für gemischte Wiedergabelisten: Unterstützung für Wiedergabelisten, die sowohl Audio- als auch Videoelemente enthalten

[1.0.26] – 07.02.2026

Behoben

• VidPly-Spracherkennung mit verzögertem Laden

[1.0.25] – 06.02.2026

Hinzugefügt

• Hinzugefügt dist/ Verzeichnis zum GitHub-Repository hinzugefügt

Geändert

• ESM-Optimierung: Verbesserte ES-Modul-Builds mit Legacy-Code als Option

[1.0.24] – 05.02.2026

Hinzugefügt

• Menü-Tastaturnavigation: „scrollIntoView“ für die Tastaturnavigation in allen Menü-Popups hinzugefügt

[1.0.23] – 04.02.2026

Geändert

• Unterstützung für den Hellmodus entfernt (vereinfachtes Design)
• Alle Größenangaben wurden für eine bessere Skalierung im Hinblick auf die Barrierefreiheit in rem-Einheiten umgestellt

[1.0.22] – 03.02.2026

Hinzugefügt

• WCAG-konformer Hellmodus: Hellmodus mit korrekter Unterstützung für Farbschemata hinzugefügt (später in 1.0.23 entfernt)

[1.0.21] – 01.12.2025

Hinzugefügt

• Anzeige von Coverbildern bei einzelnen Audiodateien: Titelbilder werden nun auch über einzelnen Audiodateien angezeigt (nicht nur bei Wiedergabelisten). Wenn eine poster Option für eine einzelne Audiodatei angegeben wird, erstellt VidPly automatisch ein Titelbild-Element, das das Albumcover über dem Player anzeigt, entsprechend der Darstellung bei Wiedergabelisten. Das Titelbild verwendet ein Seitenverhältnis von 16:3 mit responsivem Design.
• Responsives Überlaufmenü für die Steuerleiste bei vielen Schaltflächen
• Anzeige von Untertiteln im Transkript-Stil für Audio-Player (kumulative Untertitel mit Hervorhebung)
• Ziehen- und Größenänderungsmodi für das Transkriptfenster mit Tastatur- und Mausunterstützung
• Ziehen- und Größenänderungsmodi für das Gebärdensprache-Videofenster
• Einstellungsmenüs für Transkript- und Gebärdensprache-Fenster
• Dynamische Schaltflächentexte und ARIA-Labels, die sich je nach aktivem Zustand ändern

Geändert

• Touch-Unterstützung für das Ziehen und die Größenänderung von Transkript- und Gebärdensprachfenstern: Die Touch-Unterstützung für das Ziehen und die Größenänderung des Transkriptfensters und des Gebärdensprachvideos auf Touch-Geräten wurde aktiviert. Auf Mobilgeräten (< 768px) sind das Ziehen und die Größenänderung nur im Vollbildmodus verfügbar. Auf Tablets und Desktops (>= 768px) funktionieren das Ziehen und die Größenänderung in allen Modi. Benutzer können Fenster ziehen, indem sie die Kopfzeile berühren, und die Größe ändern, indem sie die Ziehpunkte berühren, wodurch dieselbe Funktionalität wie bei mausbasierten Interaktionen bereitgestellt wird.
• Steuerelemente im Vollbildmodus im Querformat automatisch ausblenden: Die Steuerelemente werden nun im Vollbildmodus im Querformat (wie auf dem Desktop) automatisch ausgeblendet, was ein immersives Seherlebnis ermöglicht. Durch Berühren oder Wischen auf dem Bildschirm werden die Steuerelemente eingeblendet; bei Inaktivität werden sie automatisch ausgeblendet. Im Vollbildmodus im Hochformat (Mobil-Layout) bleiben die Steuerelemente stets sichtbar.
• Vereinfachte Lautstärkeregelung auf Touch-Geräten: Auf Touch-Geräten (iOS, Android, Tablets) zeigt die Lautstärkeregelung nun eine einfache Schaltfläche zum Stummschalten/Entstummen anstelle eines Lautstärkereglers an. Mobile Geräte steuern die Lautstärke von HTML5-Videos über Hardware-Tasten, sodass zum schnellen Stummschalten lediglich eine Stummschalt-Schaltfläche benötigt wird. Desktop-Geräte behalten die vollständige Lautstärkeregelung per Schieberegler bei. Dies sorgt für eine bessere Benutzererfahrung, da eine schnelle Stummschaltfunktion geboten wird und gleichzeitig fehlerhafte Schieberegler auf Mobilgeräten vermieden werden.
• Der mobile Breakpoint wurde einheitlich in allen CSS- und JavaScript-Dateien von 640px auf 768px aktualisiert
• Die Logik für den mobilen Breakpoint verwendet nun < 768px für mobile Geräte und >= 768px für den Desktop
• Mindestbreite des Transkriptfensters: 370px auf dem Desktop, 300px auf Mobilgeräten
• Das Transkriptfenster für Videos hat ebenfalls Mindestbreiten (wie bei Audio)
• Verbessertes responsives Design für mobile Geräte

Behoben

• Menüpositionierung im Querformat: Es wurde behoben, dass Menüs im Querformat auf Desktop-Computern, Tablets und Smartphones nicht korrekt über den Schaltflächen positioniert wurden. Die für das Querformat spezifischen CSS-Überschreibungen zur Menüpositionierung, die die standardmäßige Logik zur Zentrierung des Menüs beeinträchtigten, wurden entfernt. Menüs werden nun in allen Querformat-Szenarien mithilfe der Standardpositionierung (right: 50%; transform: translateX(50%)) korrekt über ihren Schaltflächen zentriert.
• Desktop-Überlaufmenü im Querformat-Vollbildmodus: Es wurde behoben, dass auf Desktop-Geräten im Querformat-Vollbildmodus fälschlicherweise eine leere Schaltfläche für das Überlaufmenü angezeigt wurde. Die Logik zur Erkennung des Überlaufs erzwang einen Überlauf für alle Szenarien im Querformat-Vollbildmodus , sollte jedoch nur für mobile Geräte (< 768px) gelten. Nun zeigen Desktop-Geräte im Vollbildmodus alle Schaltflächen direkt an, ohne das Überlaufmenü.
• Problem mit doppeltem Vollbildmodus unter iOS/iPadOS: Es wurde ein Problem behoben, bei dem der native Video-Vollbildmodus über dem Pseudo-Vollbildmodus auf iOS/iPadOS-Geräten angezeigt wurde. Es wurde eine iOS/iPadOS-Erkennung hinzugefügt, um stets den Pseudo-Vollbildmodus zu verwenden, anstatt die native Vollbild-API zu nutzen, wodurch verhindert wird, dass das Video-Element in seinen eigenen nativen Vollbildmodus wechselt. Außerdem wurde das webkit-playsinline für bessere iOS-Kompatibilität. Nun wird auf iOS-Geräten nur noch eine Vollbildebene angezeigt.
• Ziehen und Größenänderung per Touch im Vollbildmodus: Es wurde behoben, dass das Ziehen und die Größenänderung im Vollbildmodus auf mobilen Geräten nicht funktionierten. Es wurden Vollbild-Änderungs-Listener hinzugefügt, um „DraggableResizable“-Instanzen beim Ein- und Austritt aus dem Vollbildmodus auf Mobilgeräten neu zu initialisieren. Es wurden touch-action: none zu den Transkript- und Gebärdensprache-Headern hinzugefügt, um Interferenzen durch Browser-Touch-Eingaben zu verhindern. CSS-Regel für mobile Geräte cursor: default !important mit cursor: move !important im Vollbildmodus. Ziehen und Größenänderung per Touch funktioniert nun im Vollbildmodus sowohl für das Transkriptfenster als auch für das Gebärdensprachvideo auf Touch-Geräten korrekt.
• Positionierung von Untertiteln im mobilen Vollbildmodus im Querformat: Es wurde behoben, dass Untertitel nicht an den unteren Rand verschoben wurden, wenn die Steuerelemente im Vollbildmodus im Querformat ausgeblendet waren. Untertitel werden nun dynamisch am unteren Rand positioniert: 16px, wenn die Steuerelemente ausgeblendet sind, und verschieben sich nach oben auf bottom: 96px, wenn die Steuerelemente sichtbar sind oder das Video angehalten wird, was ein optimales Seherlebnis ohne Sichtbehinderungen gewährleistet.
• Korrektur der Menüpositionierung im mobilen Vollbildmodus im Querformat: Es wurde behoben, dass Menüs im Vollbildmodus im Querformat nicht korrekt über ihren Schaltflächen positioniert wurden. Es wurde position: relative zu allen Schaltflächen hinzugefügt, sodass Menüs (die position: absolute) relativ zu ihrer übergeordneten Schaltfläche positioniert werden können. Es wurde sichergestellt, dass Menüs korrekt zentriert werden (right: 50%; transform: translateX(50%)), um direkt zentriert über ihren jeweiligen Schaltflächen zu erscheinen, anstatt seitlich versetzt.
• Automatisches Ausblenden im mobilen Vollbildmodus im Querformat auf Touch-Geräten: Es wurde behoben, dass Steuerelemente nach einer Touch-Interaktion im Vollbildmodus im Querformat nicht automatisch ausgeblendet wurden. Das Problem lag darin, dass die CSS :hover Pseudoklasse, die auf Touch-Geräten bestehen blieb und die Steuerelemente auf unbestimmte Zeit sichtbar hielt. Nun :hover ist dieses Verhalten ausschließlich auf Desktop-Geräte beschränkt, die @media (hover: hover) and (pointer: fine), während Touch-Geräte ausschließlich auf JavaScript-gesteuerte Sichtbarkeitsklassen zurückgreifen. Steuerelemente werden nun auf Mobilgeräten nach 4,5 Sekunden Inaktivität ordnungsgemäß automatisch ausgeblendet.
• Positionierung von Menüs im mobilen Vollbildmodus im Querformat: Es wurde behoben, dass Menüs im Vollbildmodus im Querformat nicht korrekt über ihren Schaltflächen positioniert wurden. Die Positionierung wurde von zentriert (left: 50%; transform: translateX(-50%)) auf rechtsbündig (right: 0) geändert, sodass Menüs direkt über den jeweiligen Schaltflächen erscheinen.
• Korrektur der Videozentrierung im mobilen Vollbildmodus im Querformat: Es wurde behoben, dass das Video im Vollbildmodus im Querformat nicht im Viewport zentriert war. Der Video-Wrapper wurde absolut positioniert, um den gesamten Player auszufüllen (top: 0; left: 0; right: 0; bottom: 0), und es wurde Flexbox verwendet, um das Video sowohl horizontal als auch vertikal korrekt zu zentrieren.
• Menü-Layout im mobilen Vollbildmodus im Querformat: Es wurde behoben, dass Menüs (Überlauf, Geschwindigkeit, Beschriftungen usw.) im Vollbildmodus im Querformat horizontal statt vertikal angezeigt wurden. Es wurde explizit „flex-direction: column“ hinzugefügt, um sicherzustellen, dass sich die Menüpunkte vertikal wie im Hochformat stapeln, während das horizontale Layout für Symbol und Text innerhalb jedes Menüpunkts beibehalten wird.
• Automatisches Ausblenden im mobilen Vollbildmodus im Querformat: Es wurde behoben, dass die Steuerelemente im Vollbildmodus im Querformat nicht automatisch ausgeblendet wurden. Die CSS-Spezifität wurde durch „!important“-Regeln erhöht, um die Standardwerte für Mobilgeräte zu überschreiben und so ein korrektes Verhalten beim automatischen Ausblenden sicherzustellen. Die Steuerelemente werden nun bei Inaktivität ausgeblendet und durch Berühren/Wischen wieder eingeblendet.
• Zentrierung von Videos im mobilen Vollbildmodus im Querformat: Es wurde behoben, dass Videos im Vollbildmodus im Querformat nicht zentriert wurden. Es wurde eine Flex- Zentrierung (align-items: center, justify-content: center) für den Video-Wrapper sowie ein korrektes „object-fit: contain“ für das Video- Element hinzugefügt.
• Sichtbarkeit der Steuerelemente im mobilen Vollbildmodus im Querformat: Es wurde behoben, dass die Steuerelemente auf der rechten Seite (Überlaufmenü, Vollbild-Schaltfläche, usw.) im Vollbildmodus im Querformat nicht angezeigt wurden. Es wurde sichergestellt, dass alle Steuerelement-Container und untergeordneten Schaltflächen ordnungsgemäß mit den Regeln „display: flex“ und „display: inline-flex“ angezeigt werden.
• Überlaufmenü im mobilen Vollbildmodus im Querformat: Die Erkennung des Überlaufmenüs im Vollbildmodus im Querformat wurde korrigiert. Die Überlauferkennung erkennt nun den Vollbildzustand im Querformat korrekt und stellt sicher, dass Schaltflächen und das Überlaufmenü korrekt funktionieren, selbst wenn die Viewport-Breite 768 px überschreitet.
• iOS-Vollbildmodus: Die Vollbildfunktionalität auf iPhone-/iPad-Geräten wurde korrigiert. Da iOS die Vollbild-API für Container-Elemente nicht unterstützt, wechselt VidPly nun automatisch in einen „Pseudo-Vollbild“-Modus, der den Player mithilfe von CSS so positioniert, dass er den Viewport ausfüllt. Dies sorgt für ein korrektes Vollbild-Erlebnis unter iOS, wobei alle Player-Funktionen erhalten bleiben.
• Orientierungsabhängige Steuerelemente im mobilen Vollbildmodus: Die Positionierung der Steuerelemente je nach Geräteausrichtung im Vollbildmodus wurde korrigiert. Im Querformat werden die Steuerelemente nun am unteren Rand über das Video gelegt. Im Hochformat bleiben die Steuerelemente unterhalb des Videos (mobiles Layout). Dies sorgt für ein optimales Seherlebnis in jeder Ausrichtung.
• Korrektur des z-Index für das mobile Menü: Es wurde behoben, dass das Überlaufmenü und das Lautstärkemenü im Vollbildmodus hinter dem Video-Wrapper angezeigt wurden. Der z-Index wurde für alle Menüs auf 100 erhöht, um sicherzustellen, dass sie über allen Videoinhalten erscheinen. „pointer-events: auto“ wurde hinzugefügt, um sicherzustellen, dass die Menüs per Touch bedienbar sind.
• Unterstützung für die Lautstärketasten unter iOS: Es wurde behoben, dass die Lautstärketasten unter iOS und auf Mobilgeräten nicht auf Berührungen reagierten. Es wurde ein „touchend“-Ereignis-Handler für die Stummschalt-/Lautstärketaste hinzugefügt, damit sich das Menü des Lautstärkereglers auf Touch-Geräten ordnungsgemäß öffnet.
• Touch-Unterstützung für den iOS-Lautstärkeregler: Es wurde behoben, dass der Lautstärkeregler unter iOS und auf Mobilgeräten nicht auf Berührungen reagierte. Es wurden die Ereignisbehandler „touchstart“, „touchmove“, „touchend“ und „touchcancel“ zum Lautstärkeregler hinzugefügt, um eine korrekte Touch- Interaktion auf allen mobilen Geräten zu ermöglichen. Es wurden ein größeres Touch-Ziel (Padding) und „touch-action: none“ hinzugefügt, um ein Scrollen zu verhindern. Es wurde eine Touch-Ereignisverhinderung im Lautstärkemenü hinzugefügt, um das „Event Bubbling“ zu unterbinden.
• Das Problem, dass „overflow:hidden“ Steuerelemente und Menüs im Vollbildmodus im Querformat ausblendete, wurde behoben, indem dem Video-Wrapper erlaubt wurde, „overflow: visible“ nur im Querformat zu verwenden.
• Es wurden ein „touchmove“-Ereignis-Listener und ein „enterfullscreen“-Handler hinzugefügt, um sicherzustellen, dass Steuerelemente angezeigt werden, wenn der Bildschirm im Vollbildmodus berührt wird.
• Die Verzögerung für das automatische Ausblenden im Vollbildmodus wurde erhöht (1,5-fache normale Verzögerung), um die Benutzererfahrung auf Mobilgeräten zu verbessern.
• Unterstützung für die ESC-Taste zum Beenden des Pseudo-Vollbildmodus auf iOS und anderen Geräten ohne native Vollbild-API-Unterstützung hinzugefügt.
• Die Fehlerbehandlung der Vollbild-API wurde verbessert und umfasst nun einen automatischen Fallback zum Pseudo-Vollbildmodus, wenn die native API ausfällt.
• Die Funktion zur Größenänderung des Transkriptfensters zeigt nun korrekt die Ziehpunkte an und funktioniert mit der Maus
• Die Funktion zur Größenanpassung von Gebärdensprachvideos wurde verbessert
• Einheitliche Breakpoint-Logik im gesamten Code

Dokumentation

• Alle Dokumentationsdateien wurden um Funktionen zum Ziehen und Anpassen der Größe ergänzt
• Referenzen auf mobile Haltepunkte wurden korrigiert (640px → 768px)
• Umfassende Dokumentation zu Tastaturkürzeln für die Tasten „D“ und „R“ hinzugefügt
• Erweiterung der Dokumentation zu Transkription und Gebärdensprache um Details zum Einstellungsmenü

[1.0.11] – 15.11.2025

Hinzugefügt

• Einstellungsmenü für Gebärdensprachvideos mit Optionen zum Ziehen, Größenanpassen und Schließen per Tastatur
• Unterstützung mehrerer Gebärdensprach-Videoquellen mit automatischer Sprachauswahl
• Automatischer Wechsel zwischen Gebärdensprachvideos bei Änderung der Untertitel (sofern die Sprachcodes übereinstimmen)
• Barrierefreie Beschriftungen für alle Auswahlfelder (visuell ausgeblendet, aber für Screenreader verfügbar)
• FormUtils.js-Hilfsmodul zum Erstellen barrierefreier Formularelemente
• createLabeledSelect() Hilfsfunktion zum Erstellen von beschrifteten Auswahlelementen
• toggleLabeledSelect() Hilfsfunktion zum Ein- und Ausblenden von beschrifteten Auswahlelementen
• preventDragOnElement() Hilfsfunktion zur zentralen Verhinderung des Ziehens
• Übersetzungsschlüssel closeSignLanguage sowie signLanguageSettings für alle integrierten Sprachen

Geändert

• Dropdown-Menüs verwenden nun aria-expanded anstelle von aria-pressed oder aria-haspopup für eine bessere Barrierefreiheit
• Verbesserte Fokusverwaltung bei Dropdown-Menüs – die Escape-Taste bringt den Fokus zurück zur Auslösetaste
• Verbesserte Tabulatortasten-Navigation – geöffnete Dropdown-Menüs schließen sich, wenn mit der Tabulatortaste zu einer anderen Schaltfläche gewechselt wird, ohne den Fokus zu unterbrechen
• Die Positionierung des Menüs für die Gebärdensprach-Einstellungen nutzt nun den übergeordneten Container für eine korrekte Ausrichtung
• Die Erstellung der Sprachauswahl wurde überarbeitet, um die neuen FormUtils-Hilfsfunktionen zu nutzen

Behoben

• Das Symbol zur Größenanpassung wurde in den Menüs „Transkript“ und „Gebärdenspracheinstellungen“ nicht angezeigt
• Die Schaltfläche für die Gebärdensprach-Einstellungen funktionierte nicht korrekt
• Dropdown-Menüs schließen sowohl alte als auch neue Menüs, wenn zwischen den Schaltflächen geklickt wird
• Der Fokus springt beim Drücken der Escape-Taste zurück zur vorherigen Schaltfläche
• Die Positionierung der Menüs springt beim Öffnen von Dropdown-Menüs
• Falscher Übersetzungstext auf der Schaltfläche zum Schließen der Gebärdensprache („Transkript schließen“ → „Gebärdensprachvideo schließen“)
• Das Menü für die Gebärdenspracheinstellungen unterstützt keine Navigation mit den Pfeiltasten

Verbessert

• Barrierefreiheit

  • Alle Auswahlfelder verfügen nun über korrekt zugeordnete Beschriftungen für Screenreader
  • Bessere Verwendung von ARIA-Attributen in den Dropdown-Menüs
  • Verbesserte Tastaturnavigation gemäß den Mustern von Bootstrap 5.3
  • Einheitliches Fokusmanagement für alle interaktiven Elemente

• Codequalität

  • Reduzierung von Code-Duplikaten durch Auslagerung gängiger Muster in Hilfsfunktionen
  • Verbesserte Wartbarkeit durch zentralisierte Erstellung von Formularelementen
  • Einheitliche Muster für alle Sprachauswahlfelder

Dokumentation

• Aktualisierte Dokumentation zur Gebärdensprache mit mehreren Videoquellen und Sprachumschaltung
• Ergänzte Dokumentation zum Menü für Gebärdensprach-Einstellungen und zu Tastaturkürzeln
• Erweiterte README-Datei mit aktualisierter Beschreibung der Gebärdensprache-Funktionen

[1.0.5] – 16.10.2025

Hinzugefügt

• Vollständige Internationalisierung der Zeitanzeige und der Formatierung von Zeitdauern
• Übersetzungsstrings für alle Zeiteinheiten (Stunden, Minuten, Sekunden) in allen 5 unterstützten Sprachen
• Korrekte Pluralisierung der Zeiteinheiten in allen Sprachen
• i18n-Unterstützung für das „aria-label“ der „Zeitanzeige“ und das Präfix „Dauer:“

Geändert

• TimeUtils.formatDuration() Es wird nun das i18n-System anstelle von fest codierten englischen Zeichenfolgen verwendet
• Die aria-Labels für die Zeitanzeige werden nun entsprechend der Spracheinstellung des Nutzers übersetzt
• Screenreader-Ansagen zu Zeit und Dauer werden nun korrekt lokalisiert

Verbessert

• Internationalisierung
  • Alle UI-Elemente, einschließlich der Zeitanzeigen, sind nun vollständig übersetzt
  • Die Zeitformatierung berücksichtigt sprachspezifische Konventionen
  • Korrekte Singular-/Pluralformen für alle unterstützten Sprachen (en, de, es, fr, ja)
  • Verbesserte Barrierefreiheit durch übersetzte ARIA-Labels für Screenreader

Dokumentation

• Die README.md-Datei wurde mit umfassenden Funktionsbeschreibungen aktualisiert
• Live-Demo-Links für GitHub Pages hinzugefügt
• Erweiterte API-Dokumentation mit Playlist-Beispielen
• Verbesserte Richtlinien für Beiträge
• Das Copyright-Jahr wurde auf 2025 aktualisiert

[1.0.4] – 16.10.2025

Hinzugefügt

• Navigationsschaltflächen für den vorherigen/nächsten Titel im Wiedergabelistenmodus
• Dynamische Sichtbarkeit der Steuerungsschaltflächen je nach verfügbaren Funktionen (Untertitel, Kapitel, Transkript)
• Fokusverwaltung – kehrt nach der Aktivierung eines Playlist-Elements zum Player zurück
• Semantische HTML-Struktur mit korrekter <ul> und <li> Elementen für Wiedergabelisten
• Umfassende ARIA-Attribute für Wiedergabelistenelemente (aria-posinset, aria-setsize, aria-current)
• ARIA-Live-Regionen zur Ankündigung von Titelwechseln an Screenreader
• ARIA-Landmarks (role="region") für das Wiedergabelisten-Panel
• Optisch ausgeblendete Tastaturanweisungen für Screenreader-Nutzer
• Kontext zur Titelposition („Titel X von Y“) in den Beschriftungen der Wiedergabelistenelemente
• Für Menschen lesbare Zeitangaben für Screenreader (z. B. „3 Minuten, 23 Sekunden“ statt „03:23“)
• Statusanzeigen ausschließlich für Screenreader für aktuell abgespielte Titel

Geändert

• Wiedergabelistenelemente verwenden nun semantische <li> -Elemente anstelle von <div> -Elemente
• Die Steuerleiste wird dynamisch aktualisiert, wenn sich die Medientitel ändern
• Der Transkriptinhalt wird nun automatisch aktualisiert, wenn zwischen den Elementen der Wiedergabeliste gewechselt wird
• Die Zeitanzeigen verwenden nun aria-hidden im visuellen Format und aria-label für natürliche Sprache
• Verbesserte Überschriftenstruktur mit korrekten <h2> Elementen in der Wiedergabeliste

Verbesserte

• Tastaturnavigation
  • Dynamisches „tabindex“-Muster für eine effiziente Navigation in der Wiedergabeliste (nur ein Element in der Tabulatorreihenfolge)
  • Navigation mit den Pfeiltasten (↑/↓) durch die Elemente der Wiedergabeliste
  • Home-/End-Tasten zum Springen zum ersten/letzten Titel
  • Enter/Leertaste zum Abspielen des ausgewählten Titels
• Barrierefreiheit
  • WCAG 2.2 Level AA-konforme Navigation in der Wiedergabeliste
  • Verbesserte Fokuszustände mit sichtbaren Umrandungen (2px durchgehend)
  • Verbesserter Screenreader-Kontext mit Positions-, Status- und Aktionsanweisungen
  • Intelligente Ansagen des Zeitformats (passt sich an die Dauer an)

Behoben

• Bildschirmleseprogramme lesen Zeitformate nicht mehr Zeichen für Zeichen vor (Doppelpunkte, einzelne Ziffern)
• Das Transkript wird nun korrekt aktualisiert, wenn zwischen Titeln mit unterschiedlichen Untertiteln gewechselt wird
• Steuerungsschaltflächen (Untertitel, Kapitel, Transkript) werden nun je nach Titel korrekt ein- und ausgeblendet
• Der Fokusstatus wird während der Interaktionen mit der Wiedergabeliste korrekt beibehalten

[1.0.1] – 12.10.2025

Hinzugefügt

• Menü zur Auswahl der Untertitelspur – Klicken Sie auf die Schaltfläche „CC“, um zwischen den verfügbaren Untertitelsprachen zu wechseln
• Visuelle Anzeige (Häkchen) für die aktive Untertitel-Spur
• Tastenkombination (C) öffnet nun das Untertitelmenü, wenn mehrere Spuren verfügbar sind
• Automatische Aktualisierung des Symbols, wenn Untertitel aktiviert/deaktiviert werden

1.0.0 – 11.10.2025

Erstveröffentlichung

VidPly v1.0.0 ist da! Ein vollständiger, produktionsreifer Videoplayer, der mit reinem ES6-JavaScript erstellt wurde.

Hinzugefügt

Kernfunktionen

• Unterstützung für die Wiedergabe von HTML5-Video- und Audiodateien
• Unterstützung mehrerer Formate (MP3, OGG, WAV, MP4, WebM)
• YouTube-Integration mit benutzerdefinierten Steuerelementen
• Vimeo-Integration mit einheitlicher API
• Unterstützung für HLS-Streaming mit adaptiver Bitrate
• Responsives Player-Design

Bedienelemente & Benutzeroberfläche

• Wiedergabe-/Pause-Schaltfläche mit Statusanzeige
• Fortschrittsbalken mit Suchfunktion
• Zeitanzeige (aktuell/Gesamtdauer)
• Lautstärkeregler mit vertikalem Schieberegler
• Taste zum Stummschalten/Stummschaltung aufheben
• Steuerung der Wiedergabegeschwindigkeit (0,25x – 2x)
• Vollbild-Umschaltung
• Bild-in-Bild-Unterstützung
• Einstellungsdialog mit Optionen
• Steuerelemente im Video automatisch ausblenden
• Tooltips bei Mauszeiger über dem Fortschrittsbalken

Barrierefreiheit

• Vollständige Tastaturnavigation (konform mit WCAG 2.2 AA)
• Unterstützung von Bildschirmleseprogrammen mit ARIA-Labels
• Anpassbare Tastaturkürzel
• Unterstützung des Hochkontrastmodus
• Fokusanzeigen für alle interaktiven Elemente
• Ansagen zu aktiven Bereichen
• Unterstützung für reduzierte Animationen
• Mindestens 44px große Touch-Zielbereiche auf Mobilgeräten

Bildunterschriften und Untertitel

• Unterstützung für WebVTT-Untertitel
• Unterstützung mehrerer Sprachspuren
• Anpassbares Design der Untertitel (Schriftart, Größe, Farbe)
• Einstellungen für Hintergrundfarbe und Deckkraft
• Optionen zur Positionierung der Untertitel
• Unterstützung für VTT-Formatierung (Fettdruck, Kursivschrift, Sprachkennzeichnungen)

Internationalisierung

• Englische (en) Übersetzung
• Spanische (es) Übersetzung
• Französische (fr) Übersetzung
• Deutsche (de) Übersetzung
• Japanische (ja) Übersetzung
• Einfach zu erweiterndes Übersetzungssystem
• Sprachumschaltung zur Laufzeit

Funktionen für Entwickler

• Vanilla-ES6-Module (kein Build erforderlich)
• Übersichtliche, dokumentierte API
• Ereignissystem für Zustandsänderungen
• Programmgesteuerte Player-Steuerung
• Mehrere Player auf derselben Seite
• Automatische Initialisierung über Datenattribute
• Unterstützung für manuelle Initialisierung
• Methoden zum Löschen/Aufräumen
• Debug-Modus für die Entwicklung

Leistung

• Unterstützung für Lazy Loading
• Konfigurierbare Vorladestrategien
• Effiziente Ereignisbehandlung
• Minimale Abhängigkeiten
• Geringer Speicherbedarf (~50 KB unkomprimiert)

Technische Details

Architektur

• Modulares, auf ES6-Klassen basierendes Design
• Renderer-Muster für verschiedene Medienquellen
• Plugin-System zur Erweiterung der Funktionalität
• Ereignisgesteuerte Architektur
• Trennung der Anliegen (MVC-ähnlich)

Browser-Unterstützung

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• iOS Safari 14+
• Android Chrome 90+

Renderer

• HTML5Renderer – Native Video-/Audio-Wiedergabe
• YouTubeRenderer – YouTube-IFrame-API
• VimeoRenderer – Vimeo-Player-API
• HLSRenderer – HLS.js-Integration

Komponenten

• Player – Kernklasse des Players
• ControlBar – Manager für UI-Steuerelemente
• CaptionManager – Verwalter für Bildunterschriften/Untertitel
• KeyboardManager – Tastaturnavigation
• SettingsDialog – Einstellungsoberfläche
• EventEmitter – Ereignissystem

Hilfsfunktionen

• DOMUtils – Hilfsfunktionen zur DOM-Bearbeitung
• TimeUtils – Hilfsprogramme zur Zeitformatierung
• i18n – Internationalisierungssystem

Dokumentation

• Umfassende README-Datei mit API-Referenz
• Schnellstartanleitung
• Ausführliche Dokumentation zur Verwendung
• Inline-Code-Dokumentation
• Live-Demo mit Beispielen

Build-System

• esbuild – Schneller JavaScript-Bundler
• clean-css – CSS-Minifier
• Build-Skripte zum Erstellen von Produktions-Bundles
• Watch-Modus für die Entwicklung
• Mehrere Ausgabeformate (ESM, IIFE)
• Source-Maps für die Fehlersuche
• Automatische Minifizierung

Build-Skripte

• build/build.js - Haupt-JavaScript-Build
• build/build-css.js - CSS-Build und -Minifizierung
• build/watch.js - Entwicklungs-Watch-Modus
• build/clean.js - „dist“-Verzeichnis bereinigen

Ausgabedateien

• dist/dev/vidply.esm.js - ES-Modul (Entwicklung)
• dist/prod/vidply.esm.min.js - ES-Modul (Produktionsumgebung)
• dist/legacy/vidply.js - IIFE-Bundle (Entwicklung)
• dist/legacy/vidply.min.js - IIFE-Bundle (Produktiv)
• dist/vidply.css - Styles (unminifiziert)
• dist/vidply.min.css - Styles (minifiziert)

Quelldateien

• src/core/Player.js - Haupt-Player-Klasse (~500 Zeilen)
• src/controls/ControlBar.js - Steuerleisten-Komponente (~600 Zeilen)
• src/controls/CaptionManager.js - Verwaltung der Untertitel (~200 Zeilen)
• src/controls/KeyboardManager.js - Tastatursteuerung (~150 Zeilen)
• src/controls/SettingsDialog.js - Benutzeroberfläche für Einstellungen (~300 Zeilen)
• src/renderers/HTML5Renderer.js - HTML5-Wiedergabe (~200 Zeilen)
• src/renderers/YouTubeRenderer.js - YouTube-Unterstützung (~250 Zeilen)
• src/renderers/VimeoRenderer.js - Vimeo-Unterstützung (~220 Zeilen)
• src/renderers/HLSRenderer.js - HLS-Streaming (~250 Zeilen)
• src/utils/EventEmitter.js - Ereignissystem
• src/utils/DOMUtils.js - DOM-Hilfsfunktionen
• src/utils/TimeUtils.js - Zeit-Hilfsfunktionen
• src/i18n/i18n.js - i18n-System
• src/i18n/translations.js - Übersetzungsstrings (5 Sprachen)
• src/icons/Icons.js - SVG-Symbolbibliothek (über 30 Symbole)
• src/styles/vidply.css - Player-Stile (~800 Zeilen)
• src/index.js - Einstiegspunkt

Demo-Dateien

• demo/demo.html - Vollständige Demo mit lokalen Mediendateien
• demo/index.html - Demo-Landingpage
• demo/media/ - Demo-Mediendateien (Videos, Audio, Untertitel)

Dokumentation

• README.md - Vollständige Dokumentation (~500 Zeilen)
• docs/GETTING_STARTED.md - Einführungshandbuch (Installation + Schnellstart)
• docs/USAGE.md - Ausführliche Anwendungsbeispiele
• docs/PLAYLIST.md - Dokumentation zur Playlist-Funktion
• docs/BUILD.md - Dokumentation zum Build-System
• docs/CHANGELOG.md - Diese Datei
• LICENSE - GPL-2.0-oder-später-Lizenz
• package.json - Paketkonfiguration mit Build-Skripten

Statistiken

• Gesamtzahl der Codezeilen: ~4.000+
• Minifizierte Größe (JS): ~50 KB
• Minifizierte Größe (CSS): ~12 KB
• Gesamtgröße (gzipped): ~18 KB
• Quelldateien: 22
• Build-Skripte: 4
• SVG-Symbole: über 30
• Sprachen: 5 integriert
• Demodateien: über 20 Mediendateien