TextTrackCue.pauseOnExit — Eigenschaft · JavaScript-Referenz

Signatur

TextTrackCue.pauseOnExit

Beschreibung

Mit der Eigenschaft pauseOnExit eines TextTrackCue (in der Praxis meist eines VTTCue) legen Sie fest, ob ein <video>- oder <audio>-Element die Wiedergabe von selbst pausiert, sobald die Abspielposition das Ende des Cues erreicht, also dessen endTime. Standardmäßig steht der Wert auf false.

Nützlich ist das für interaktive Medien: Lernvideos, die nach jedem Kapitel auf eine Bestätigung warten, Quizfragen an bestimmten Stellen, Sprachkurse mit Pausen zum Nachsprechen oder Hinweise, die der Nutzer erst wegklicken muss. Die Pause kommt vom Browser selbst. Sie brauchen also kein eigenes Abfragen von currentTime im timeupdate-Event, das oft ein paar hundert Millisekunden zu spät auslöst.

Das Anhalten greift nur, wenn der Cue während der normalen Wiedergabe verlassen wird. Springt der Nutzer mit dem Suchregler über das Ende hinweg, pausiert das Medium nicht. Der zugehörige TextTrack darf außerdem nicht im Modus "disabled" sein. Die Modi "hidden" und "showing" funktionieren beide.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Neuer Wert beim Setzen: `true` pausiert die Wiedergabe am Ende des Cues, `false` spielt normal weiter. Andere Werte werden in einen booleschen Wert umgewandelt.

Beispiele

Cue mit automatischer Pause anlegen

const video = document.querySelector('video');
const track = video.addTextTrack('metadata', 'Kapitel');
track.mode = 'hidden';

// Kapitel 1 läuft von 0 bis 30 Sekunden, danach wird pausiert
const cue = new VTTCue(0, 30, 'Kapitel 1: Einführung');
cue.pauseOnExit = true;
track.addCue(cue);

console.log(cue.pauseOnExit);

true

Quiz nach jedem Abschnitt einblenden

const video = document.querySelector('#lernvideo');
const dialog = document.querySelector('#quiz');
const track = video.addTextTrack('metadata', 'Quiz');
track.mode = 'hidden';

const abschnitte = [
  { start: 0, ende: 45, frage: 'Was ist eine Variable?' },
  { start: 45, ende: 120, frage: 'Wozu dient const?' }
];

for (const { start, ende, frage } of abschnitte) {
  const cue = new VTTCue(start, ende, frage);
  cue.pauseOnExit = true;
  // Beim Verlassen des Cues pausiert das Video, dann Frage anzeigen
  cue.addEventListener('exit', () => {
    dialog.querySelector('p').textContent = cue.text;
    dialog.showModal();
  });
  track.addCue(cue);
}

dialog.addEventListener('close', () => video.play());

Pausen für vorhandene Untertitel ein- und ausschalten

const video = document.querySelector('video');
const toggle = document.querySelector('#nachsprechen');

// Sprachkurs-Modus: nach jedem Untertitel anhalten
toggle.addEventListener('change', () => {
  const track = video.textTracks[0];
  track.mode = 'showing';
  for (const cue of track.cues ?? []) {
    cue.pauseOnExit = toggle.checked;
  }
  console.log(`Pause nach Cues: ${toggle.checked}`);
});

Pause nach Cues: true

// Wichtig · Fallstricke

Beim Vorspulen über das Cue-Ende hinweg wird nicht pausiert. Die Pause gilt nur für das Verlassen während der normalen Wiedergabe.
track.cues ist null, solange der Track "disabled" ist. Bei <track>-Elementen ist die Liste außerdem erst nach dem load-Event des Tracks gefüllt.
In WebVTT-Dateien lässt sich pauseOnExit nicht angeben. Sie müssen es immer per JavaScript setzen.
Folgen mehrere Cues mit pauseOnExit direkt aufeinander, pausiert das Video an jeder Grenze. Das kann Nutzer irritieren, deshalb sollte es eine Möglichkeit geben, die Pausen abzuschalten.
Die genaue Stelle der Pause kann je nach Browser um einige Millisekunden abweichen. Die Eigenschaft wird in allen modernen Browsern unterstützt, der Internet Explorer hatte eingeschränkten Support.

Siehe auch

TextTrack.sourceBuffer TextTrackCue.endTime TextTrackCue.id TextTrackCue.startTime TextTrackCue.track