Interaktive Transkriptfunktion

Funktionen

• Automatisches Scrollen – Das Transkript hebt die aktuelle Zeile automatisch hervor und scrollt dorthin
• Klicken zum Springen – Klicken Sie auf eine beliebige Zeile des Transkripts, um zu diesem Moment im Video zu springen
• Verschiebbares Fenster – Positionieren Sie das Transkript an einer beliebigen Stelle auf dem Bildschirm (nur Desktop)
• Fenstergröße anpassen – Passen Sie die Größe des Transkriptfensters mit der Maus oder der Tastatur an
• Tastatur-Verschiebemodus – Verwenden Sie die Pfeiltasten, um das Transkriptfenster zu verschieben (Taste „D“ zum Umschalten)
• Tastatur-Größenänderungsmodus – Verwenden Sie die Pfeiltasten, um die Größe des Transkriptfensters anzupassen (Taste „R“ zum Umschalten)
• Einstellungsmenü – Konfigurieren Sie die Zieh- und Größenanpassungsmodi
• Mobilgeräte-Anpassung – Passt sich mit optimiertem Layout an mobile Bildschirme (< 768px) an
• Vollbildunterstützung – Das Transkript wird im Vollbildmodus intelligent neu positioniert
• Suchen & Lesen – Ideal für Barrierefreiheit und das Erlernen von Sprachen

Schnellstart

Transkript aktivieren

<video data-vidply data-transcript="true" data-transcript-button="true">
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>

<script type="module">
  import Player from './dist/prod/vidply.esm.min.js';
</script>

Das war’s schon! Die Transkript-Schaltfläche erscheint in der Steuerleiste.

Konfigurationsoptionen

Über JavaScript

const player = new Player('#video', {
  transcript: true,              // Enable transcript feature
  transcriptButton: true,        // Show transcript button in controls
  transcriptPosition: 'external' // Position mode (currently only 'external')
});

Über Datenattribute

<video 
  data-vidply
  data-transcript="true"
  data-transcript-button="true"
  src="video.mp4"
>
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>

So funktioniert es

Die Transkriptionsfunktion führt automatisch folgende Schritte durch:

1. Untertitel-Spuren in Ihrem Video erkennt
2. Lädt den VTT-Cue-Text (WebVTT)
3. Erstellt ein interaktives, scrollbares Fenster
4. hebt die aktuelle Zeile entsprechend der Videowiedergabezeit hervor
5. scrollt automatisch, damit die aktuelle Zeile sichtbar bleibt

API-Methoden

Transkript anzeigen/ausblenden

const player = new Player('#video', {
  transcript: true,
  transcriptButton: true
});

// Show transcript window
player.transcriptManager.showTranscript();

// Hide transcript window
player.transcriptManager.hideTranscript();

// Toggle transcript visibility
player.transcriptManager.toggleTranscript();

Status prüfen

// Check if transcript is visible
if (player.transcriptManager.isVisible) {
  console.log('Transcript is showing');
}

Programmgesteuerte Steuerung

// Get transcript entries
console.log(player.transcriptManager.transcriptEntries);

// Get current active entry
console.log(player.transcriptManager.currentActiveEntry);

Benutzerinteraktion

Zum Suchen anklicken

Benutzer können auf eine beliebige Zeile des Transkripts klicken, um zu diesem Zeitpunkt zu springen:

// This happens automatically, but you can listen for it
player.on('timeupdate', (time) => {
  console.log('User jumped to:', time);
});

Ziehen und Größe ändern (Desktop)

Auf dem Desktop (>= 768px) können Benutzer:

Ziehmodus:

• D-Taste – Tastatur-Ziehmodus umschalten
• Pfeiltasten – Fenster in 10-px-Schritten verschieben (Umschalt = 50 px)
• Ziehen mit der Maus – Ziehen Sie die Kopfzeile des Transkripts, um die Position anzupassen
• Home-Taste – Zur Mitte zurücksetzen
• Esc-Taste – Drag-Modus beenden

Größenänderungsmodus:

• R-Taste – Umschalten in den Größenänderungsmodus über die Tastatur
• Pfeiltasten – Fenstergröße in 10-Pixel-Schritten anpassen (Umschalt = 50 Pixel)
• Größenänderung mit der Maus – Zieh an den Griffen an den Fensterrändern
• Esc-Taste – Größenänderungsmodus beenden

Einstellungsmenü:

• Klicken Sie auf das Einstellungssymbol (⚙️) in der Kopfzeile des Transkripts
• Ziehmodus und Größenänderungsmodus umschalten
• Das Transkriptfenster schließen

Verhalten auf Mobilgeräten

Auf Mobilgeräten (< 768px Breakpoint):

• Das Transkript wird unterhalb des Videoplayers angezeigt
• Im Dokumentfluss positioniert (nicht verschiebbar oder in der Größe anpassbar)
• Optimiert für das Scrollen und Lesen
• Mindestbreite: 300px

Anzeigemodi

Desktop (nicht im Vollbildmodus)

• Wird neben dem Videoplayer angezeigt
• Kann an jede beliebige Position gezogen werden
• Die Höhe passt sich der Höhe des Videos an

Vollbildmodus

• Befindet sich in der rechten unteren Ecke
• Schwebt über dem Video
• Lässt Platz für die Steuerelemente

Mobil

• Unterhalb des Videos und der Steuerelemente
• Über die gesamte Breite
• Maximale Höhe von 400px
• Teil des Seitenflusses

Tastaturkürzel

Globale Tastenkombinationen (bei aktivem Player)

Ziehmodus (Taste „D“ – muss zuvor aktiviert werden)

Größenänderungsmodus (Taste „R“ – muss zuvor aktiviert werden)

Transkript-Einträge

Gestaltung des Transkripts

Benutzerdefinierte Farben

/* Transcript window */
.vidply-transcript-window {
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Header */
.vidply-transcript-header {
  background: rgba(30, 30, 40, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Transcript entries */
.vidply-transcript-entry {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Active entry */
.vidply-transcript-entry-active {
  background: rgba(59, 130, 246, 0.2);
  border-left: 3px solid #3b82f6;
}

/* Timestamp */
.vidply-transcript-time {
  color: #60a5fa;
  font-weight: 600;
}

Vollständiges Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transcript Example</title>
  <link rel="stylesheet" href="dist/vidply.min.css">
  
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 20px;
      background: #111;
      color: #fff;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    h1 {
      margin-bottom: 20px;
    }
    
    /* Custom transcript styling */
    .vidply-transcript-window {
      background: linear-gradient(135deg, rgba(30, 30, 50, 0.98), rgba(20, 20, 40, 0.98));
      backdrop-filter: blur(10px);
    }
    
    .vidply-transcript-entry-active {
      background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2));
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Video with Interactive Transcript</h1>
    
    <video 
      id="my-video"
      data-vidply
      data-transcript="true"
      data-transcript-button="true"
      width="800" 
      height="450"
    >
      <source src="video.mp4" type="video/mp4">
      <track kind="captions" src="captions-en.vtt" srclang="en" label="English" default>
      <track kind="captions" src="captions-es.vtt" srclang="es" label="Español">
    </video>
    
    <div style="margin-top: 20px;">
      <button id="toggleTranscript">Toggle Transcript</button>
    </div>
  </div>

  <script type="module">
    import Player from './dist/prod/vidply.esm.min.js';
    
    // Player is auto-initialized via data-vidply
    
    // Get player instance
    const videoElement = document.getElementById('my-video');
    const player = videoElement.vidply; // Player instance stored on the media element

    // Or find it manually
    const allPlayers = document.querySelectorAll('[data-vidply]');
    // const player = allPlayers[0].vidply;
    
    // Manual toggle button
    document.getElementById('toggleTranscript').addEventListener('click', () => {
      if (player && player.transcriptManager) {
        player.transcriptManager.toggleTranscript();
      }
    });
    
    // Listen for transcript interactions
    document.addEventListener('DOMContentLoaded', () => {
      // Wait a moment for player to initialize
      setTimeout(() => {
        const container = document.querySelector('.vidply-player');
        const video = container?.querySelector('video, audio');
        if (video && video.vidply) {
          const p = video.vidply;
          
          p.on('timeupdate', (time) => {
            // User can see which line is active
            if (p.transcriptManager && p.transcriptManager.currentActiveEntry) {
              console.log('Active transcript:', p.transcriptManager.currentActiveEntry.cue.text);
            }
          });
        }
      }, 1000);
    });
  </script>
</body>
</html>

Anwendungsfälle

1. Barrierefreiheit

• Benutzer von Bildschirmleseprogrammen können den Transkripttext lesen
• Gehörlose oder schwerhörige Nutzer erhalten vollen Zugriff auf den Text
• Nutzer in lauten Umgebungen können den Text lesen, anstatt zuzuhören

2. Sprachenlernen

• Machen Sie mit den Muttersprachlern mit
• Klicken Sie hier, um schwierige Abschnitte erneut abzuspielen
• Lesen und hören Sie gleichzeitig

3. Suche & Navigation

• Inhalte schnell überfliegen
• Bestimmte Themen finden
• Zu relevanten Abschnitten springen

4. Notizen machen

• Genaue Zitate zitieren
• Text für Zitate kopieren
• Lernhilfe für Bildungsinhalte

5. SEO & Auffindbarkeit

• Videoinhalte werden textdurchsuchbar
• Bessere Indizierung für Barrierefreiheit
• Verbesserte Auffindbarkeit von Inhalten

Anforderungen

Untertitel-Spur erforderlich

Für die Transkriptfunktion ist mindestens eine Untertitel-Spur erforderlich:

<track kind="captions" src="captions.vtt" srclang="en" label="English">
<!-- or -->
<track kind="subtitles" src="subtitles.vtt" srclang="en" label="English">

Hinweis: kind="descriptions" oder kind="chapters" Spuren werden NICHT für Transkripte verwendet.

Unterstützte Streaming-Formate

 

iOS / iPadOS: Obwohl hls.js es auf iOS nicht ausgeführt werden kann (kein MSE), überwacht VidPly addtrack / removetrack / loadedmetadata die native HTMLMediaElement.textTracks Erfassung und zeigt jede Untertitelvariante über dasselbe Untertitelmenü und dieselbe interaktive Transkriptanzeige an wie auf dem Desktop. „Transcript-on-iOS“ funktioniert nun für Live- und adaptive HLS-Streams.

 

Bei DASH-Streams mit TTML-Untertiteln werden die Untertitel zwar von dash.js auf dem Bildschirm angezeigt, das interaktive Transkript ist jedoch nicht verfügbar. Wenn Sie Transkriptunterstützung bei DASH benötigen, verwenden Sie WebVTT-Untertitelspuren.

WebVTT-Format

Untertitel müssen im WebVTT-Format vorliegen:

WEBVTT

00:00:00.000 --> 00:00:05.000
Welcome to this video tutorial.

00:00:05.000 --> 00:00:10.000
Today we'll learn about VidPly's transcript feature.

00:00:10.000 --> 00:00:15.000
It's a powerful tool for accessibility and learning.

Browser-Unterstützung

Die Transkriptfunktion funktioniert in allen modernen Browsern:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile Browser (iOS Safari, Chrome Android)

Fehlerbehebung

Schaltfläche „Untertitel“ wird nicht angezeigt

Ursache: Es wurden keine Untertitel-Spuren erkannt

Lösung:

<!-- Add at least one caption track -->
<track kind="captions" src="captions.vtt" srclang="en" label="English">

Das Transkript zeigt „Wird geladen...“ an

Ursache: Das Laden der VTT-Datei dauert lange oder der Pfad ist falsch

Lösungen:

1. Überprüfen Sie, ob der Dateipfad korrekt ist
2. Überprüfen Sie die CORS-Header, wenn das Laden von einer anderen Domain erfolgt
3. Überprüfen Sie, ob das VTT-Dateiformat gültig ist

Transkript lässt sich auf Mobilgeräten nicht verschieben

Erwartet: Auf Mobilgeräten (< 768px) ist das Transkript NICHT verschiebbar. Es wird im Seitenfluss unterhalb des Videos positioniert.

Transkript scrollt nicht automatisch

Ursache: JavaScript-Fehler oder Untertitelspur nicht im hidden Modus

Lösung: Überprüfen Sie die Browserkonsole auf Fehler. Der Transkript-Manager setzt den Track-Modus automatisch auf hidden.

Erweitert: Externer Transkript-Container

Sie können das Transkript in einem benutzerdefinierten Container anzeigen (zukünftige Funktion):

const player = new Player('#video', {
  transcript: true,
  transcriptPosition: 'external',
  transcriptContainer: '#my-transcript-container'
});

<div id="my-transcript-container"></div>

Hinweis: Diese Funktion ist teilweise implementiert. Derzeit wird das Transkript immer neben oder unterhalb des Videos angezeigt.

Hinweise zur Leistung

• Transkript-Einträge werden bei Bedarf erstellt, wenn das Transkript zum ersten Mal angezeigt wird
• Das automatische Scrollen nutzt effiziente scrollIntoView; das smooth Verhalten wird automatisch übersprungen, wenn der Nutzer prefers-reduced-motion aktiviert hat (WCAG 2.2 SC 2.3.3)
• Ereignis-Listener werden bereinigt, wenn das Transkript entfernt wird (registriert über eine player-spezifische AbortController)
• Keine Auswirkungen auf die Leistung, wenn das Transkript nicht sichtbar ist

Barrierefreiheitsfunktionen

Tastaturzugänglichkeit – Vollständige Tastaturnavigation
ARIA-Labels – Korrekte „role“- und „aria-label“-Attribute
Fokusverwaltung – Logische Fokusreihenfolge mit einer Fokusfalle, solange das Fenster geöffnet ist; beim Schließen
kehrt der Fokus zum Umschaltelement zurück Screenreader-freundlich – Semantische HTML-Struktur
Hoher Kontrast – Berücksichtigt die Farbeinstellungen
des Systems Reduzierte Bewegung – Automatisches Scrollen berücksichtigt prefers-reduced-motion
Touch-freundlich – Touch-Ziele entsprechen mindestens der WCAG 2.2 AA-Anforderung von 24×24 CSS-Pixeln (SC 2.5.8)

Bewährte Verfahren

1. Stellen Sie immer Beschriftungen bereit – Selbst automatisch generierte Beschriftungen sind besser als gar keine
2. Verwenden Sie beschreibende Bezeichnungen – Helfen Sie den Nutzern, die Sprachen der Titel zu identifizieren
3. Auf Mobilgeräten testen – Stellen Sie sicher, dass das Transkript auf kleinen Bildschirmen lesbar ist
4. Positionierung berücksichtigen – Das Transkript neben dem Video funktioniert auf dem Desktop gut
5. Stilistisch einheitlich gestalten – Passen Sie das Design an Ihre Website an und achten Sie dabei auf gute Lesbarkeit

Demo

Sehen Sie sich funktionierende Beispiele an:

• demo/demo.html – Grundlegende Verwendung von Transkripten
• demo/sign-language-demo.html - Transkript mit Gebärdensprache-Video

Erstellt mit Vanilla JavaScript von Matthias Peltzer