TimeRanges.start() — Methode · JavaScript-Referenz

Signatur

TimeRanges.prototype.start(index)

Beschreibung

Ein TimeRanges-Objekt beschreibt einen oder mehrere zusammenhängende Zeitbereiche eines Mediums. Solche Objekte liefern z. B. die Eigenschaften HTMLMediaElement.buffered (bereits geladene Bereiche), HTMLMediaElement.played (schon abgespielte Bereiche) und HTMLMediaElement.seekable (Bereiche, zu denen gesprungen werden kann). Mit start(index) fragt man den Beginn des Bereichs an Position index ab, das Gegenstück dazu ist end(index).

Die Bereiche sind nach Startzeit sortiert, überschneiden sich nicht und berühren sich auch nicht: Aneinandergrenzende Bereiche werden zu einem zusammengefasst. Die Anzahl der Bereiche steht in TimeRanges.length. Wer über alle Bereiche laufen will, geht also von 0 bis length - 1.

Typische Anwendungen sind eigene Fortschrittsbalken für den Puffer, die Prüfung, ob eine bestimmte Stelle schon geladen ist, bevor man dorthin springt, und die Auswertung, welche Teile eines Videos tatsächlich angesehen wurden.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierter Index des Zeitbereichs. Muss kleiner als `TimeRanges.length` sein.

Rückgabewert

Typ

number

Beschreibung

Die Startzeit des angegebenen Bereichs in Sekunden (Gleitkommazahl) relativ zum Anfang des Mediums.

Beispiele

Alle gepufferten Bereiche eines Videos ausgeben

const video = document.querySelector('video');

video.addEventListener('progress', () => {
  const { buffered } = video;
  for (let i = 0; i < buffered.length; i++) {
    const start = buffered.start(i).toFixed(2);
    const end = buffered.end(i).toFixed(2);
    console.log(`Bereich ${i}: ${start}s – ${end}s`);
  }
});

Bereich 0: 0.00s – 12.48s Bereich 1: 45.00s – 51.20s

Prüfen, ob eine Zielzeit bereits gepuffert ist

const isBuffered = (media, time) => {
  const ranges = media.buffered;
  for (let i = 0; i < ranges.length; i++) {
    if (time >= ranges.start(i) && time <= ranges.end(i)) {
      return true;
    }
  }
  return false;
};

const video = document.querySelector('video');
const target = 30;
if (isBuffered(video, target)) {
  video.currentTime = target; // Sprung ohne Nachladen
} else {
  console.log('Stelle noch nicht geladen – Sprung löst Nachladen aus.');
}

Frühesten ansteuerbaren Zeitpunkt eines Live-Streams bestimmen

const video = document.querySelector('video');

video.addEventListener('loadedmetadata', () => {
  const { seekable } = video;
  if (seekable.length > 0) {
    const earliest = seekable.start(0);
    const latest = seekable.end(seekable.length - 1);
    console.log(`Spulbar von ${earliest}s bis ${latest}s`);
  }
});

Spulbar von 0s bis 3600s

// Wichtig · Fallstricke

Ist index nicht kleiner als length, wirft start() eine DOMException vom Typ IndexSizeError. Prüfe deshalb vorher length, besonders bei leeren Objekten (z. B. buffered vor dem Laden).
TimeRanges-Objekte sind Momentaufnahmen. Während das Medium lädt, ändern sich Bereiche und Indizes. Lies media.buffered daher bei jedem progress- oder timeupdate-Event neu aus und speichere das Objekt nicht dauerhaft.
Bei Live-Streams oder Media Source Extensions muss start(0) nicht 0 sein.
Negative oder nicht-ganzzahlige Indizes werden nach den WebIDL-Regeln in unsigned long umgewandelt. Das kann zu unerwarteten Fehlern führen, daher immer ganze Zahlen übergeben.
Die Methode wird von allen modernen Browsern seit Langem unterstützt.

Siehe auch

TimeRanges.end() Range.setStart() Sensor.start() FileReader.abort() MessagePort.start()