Signatur
Beschreibung
fastSeek() setzt die Wiedergabeposition eines Medienelements auf ungefähr die angegebene Zeit. Anders als das Setzen von currentTime, das bildgenau sucht, darf der Browser hier auf einen nahegelegenen Keyframe (Schlüsselbild) springen. Dann muss er die Zwischenbilder nicht erst decodieren, deshalb ist der Sprung spürbar schneller.
Die Methode eignet sich vor allem für Scrubbing, also wenn jemand einen Zeitleisten-Regler zieht und dabei in kurzer Folge viele Suchvorgänge auslöst. Auch für Vorschau-Funktionen und schnelles Vor- oder Zurückspulen, bei denen es nicht auf das exakte Bild ankommt, ist sie gut geeignet. Wenn der Nutzer den Regler loslässt, setzt man sinnvollerweise noch einmal currentTime auf den genauen Wert.
Nach dem Aufruf feuert das Element wie bei jedem Suchvorgang die Events seeking und seeked. Anschließend enthält currentTime die tatsächlich erreichte Position, die von der angeforderten Zeit abweichen kann.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $time Pflicht | number | Gewünschte Zielzeit in Sekunden (Gleitkommazahl). Der Browser springt zu einer nahegelegenen Position, meist zum nächsten Keyframe. |
Rückgabewert
undefined). Die tatsächlich erreichte Position steht danach in currentTime, spätestens nach dem Event seeked.Beispiele
Schnell suchen mit Rückfall auf currentTime
const video = document.querySelector('video');
// Hilfsfunktion: nutzt fastSeek, wenn verfügbar, sonst currentTime
const seekTo = (media, time) => {
if (typeof media.fastSeek === 'function') {
media.fastSeek(time);
} else {
media.currentTime = time;
}
};
video.addEventListener('seeked', () => {
console.log(`Tatsächliche Position: ${video.currentTime.toFixed(2)} s`);
});
seekTo(video, 42.5);Scrubbing mit Zeitleisten-Regler
const video = document.querySelector('#player');
const slider = document.querySelector('#timeline'); // <input type="range">
video.addEventListener('loadedmetadata', () => {
slider.max = video.duration;
slider.step = 0.1;
});
// Während des Ziehens: schnell und ungenau suchen
slider.addEventListener('input', () => {
const t = Number(slider.value);
if (video.fastSeek) {
video.fastSeek(t);
} else {
video.currentTime = t;
}
});
// Beim Loslassen: exakt auf die gewünschte Zeit setzen
slider.addEventListener('change', () => {
video.currentTime = Number(slider.value);
});Schnelles Vorspulen per Tastatur
const video = document.querySelector('video');
document.addEventListener('keydown', (event) => {
const step = event.shiftKey ? 30 : 10; // mit Umschalttaste: 30 s
let target = null;
if (event.key === 'ArrowRight') target = Math.min(video.currentTime + step, video.duration);
if (event.key === 'ArrowLeft') target = Math.max(video.currentTime - step, 0);
if (target === null) return;
event.preventDefault();
video.fastSeek ? video.fastSeek(target) : (video.currentTime = target);
console.log(`Springe ungefähr zu ${target.toFixed(1)} s`);
});// Wichtig · Fallstricke
Browser-Kompatibilität: fastSeek() wird von Firefox und Safari unterstützt, von Chromium-Browsern wie Chrome, Edge und Opera aber nicht. Prüfe deshalb immer vorher mit typeof media.fastSeek === 'function', ob die Methode vorhanden ist, und setze sonst currentTime. Ohne diese Prüfung wirft der Aufruf in Chromium einen TypeError.
- Ungenauigkeit: Die erreichte Position kann um mehrere Sekunden von der angeforderten Zeit abweichen. Wie weit, hängt vom Keyframe-Abstand der Datei ab. Wenn es auf das genaue Bild ankommt, etwa bei Untertitel-Synchronisation, Kapitelsprüngen oder Standbildern, verwende
currentTime. - Nicht bildgenaue Schnittpunkte: Den Wert von
currentTimeerst nach dem Eventseekedauslesen. Direkt nach dem Aufruf kann er noch den alten Wert enthalten. - Der Suchvorgang ist nur möglich, wenn das Medium suchbar ist (siehe
seekable). Bei Livestreams hat er eventuell keine Wirkung. - Gibt man
NaNoder einen Wert an, der keine Zahl ist, wird einTypeErrorausgelöst.