HTMLMediaElement.loop — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMediaElement.loop

Beschreibung

Die Eigenschaft loop von HTMLMediaElement (also <audio> und <video>) spiegelt das gleichnamige boolesche HTML-Attribut wider. Ist sie true, springt die Wiedergabe beim Erreichen des Endes automatisch an den Anfang zurück und läuft weiter.

Typische Einsatzfälle sind Hintergrundvideos, Hintergrundmusik in Spielen, kurze animierte Clips als GIF-Ersatz oder Ambient-Sounds. Die Eigenschaft ist lesbar und schreibbar; eine Änderung per JavaScript fügt das Attribut loop im DOM hinzu bzw. entfernt es – und umgekehrt.

Wichtig: Solange loop aktiv ist, wird beim Zurückspringen kein ended-Event ausgelöst und paused bleibt false. Wer das Ende eines Durchlaufs erkennen will, muss auf andere Signale wie seeking/seeked oder timeupdate ausweichen.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Medium in Endlosschleife abgespielt wird, sonst false (Standardwert, wenn das Attribut fehlt).

Beispiele

Schleife per JavaScript ein- und ausschalten

const video = document.querySelector('#hero-video');

console.log(video.loop); // false, wenn kein loop-Attribut gesetzt ist

video.loop = true;
console.log(video.hasAttribute('loop')); // Attribut wird mitgesetzt

video.muted = true; // nötig für Autoplay in den meisten Browsern
video.play().catch((err) => console.warn('Autoplay blockiert:', err.name));

false true

Umschalt-Button für einen Audio-Player

const audio = document.querySelector('audio');
const button = document.querySelector('#loop-toggle');

const updateLabel = () => {
  button.textContent = audio.loop ? 'Wiederholen: an' : 'Wiederholen: aus';
  button.setAttribute('aria-pressed', String(audio.loop));
};

button.addEventListener('click', () => {
  audio.loop = !audio.loop;
  updateLabel();
});

updateLabel();

Durchläufe zählen und nach n Wiederholungen stoppen

const sound = new Audio('/sounds/alarm.mp3');
sound.loop = true;

let durchlaeufe = 0;
const maxDurchlaeufe = 3;

// 'ended' feuert bei loop = true nicht – beim Zurückspringen gibt es aber 'seeked'
sound.addEventListener('seeked', () => {
  if (sound.currentTime < 0.5) {
    durchlaeufe++;
    console.log(`Durchlauf ${durchlaeufe} beendet`);
    if (durchlaeufe >= maxDurchlaeufe - 1) {
      sound.loop = false; // letzter Durchlauf endet normal mit 'ended'
    }
  }
});

sound.addEventListener('ended', () => console.log('Fertig'));

document.querySelector('#start').addEventListener('click', () => sound.play());

Durchlauf 1 beendet Durchlauf 2 beendet Fertig

// Wichtig · Fallstricke

Kein ended-Event: Bei loop = true wird ended nie ausgelöst. Logik, die am Ende laufen soll (z. B. nächster Titel in einer Playlist), funktioniert dann nicht.
Nahtlose Schleifen: Beim Zurückspringen kann es je nach Browser und Format (besonders MP3 wegen Encoder-Padding) eine kurze Lücke oder ein Knacken geben. Für wirklich lückenlose Audio-Schleifen besser die Web Audio API mit AudioBufferSourceNode.loop verwenden.
Nicht bei Livestreams: Bei Medien ohne definiertes Ende (duration === Infinity) hat loop keine Wirkung.
Autoplay: loop startet keine Wiedergabe. Für automatisch laufende Hintergrundvideos zusätzlich autoplay, muted und auf iOS playsinline setzen.
Barrierefreiheit: Endlos laufende Inhalte, die länger als 5 Sekunden dauern, sollten laut WCAG 2.2.2 pausierbar sein – immer eine Steuerung anbieten.
Die Eigenschaft wird von allen modernen Browsern seit Langem unterstützt.

Siehe auch

HTMLMediaElement.error HTMLMediaElement.src HTMLMediaElement.ended HTMLMediaElement.loading HTMLMediaElement.muted