HTMLMediaElement.defaultMuted — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMediaElement.defaultMuted

Beschreibung

defaultMuted ist eine boolesche Eigenschaft von <audio>- und <video>-Elementen. Sie spiegelt direkt das Inhaltsattribut muted im HTML wider: Wer defaultMuted = true setzt, fügt dem Element das Attribut muted hinzu. Mit false wird es entfernt.

Wichtig ist der Unterschied zur Eigenschaft muted. muted gibt den aktuellen Zustand der Stummschaltung an, also das, was der Nutzer gerade hört. defaultMuted beschreibt dagegen nur den Ausgangszustand. Ändert man defaultMuted, nachdem das Element geladen ist, hat das keinen Einfluss auf die laufende Wiedergabe. Umgekehrt ändert das Setzen von muted weder das Attribut noch defaultMuted.

Praktisch nützlich ist die Eigenschaft vor allem, wenn Medienelemente dynamisch per JavaScript erzeugt werden. Dann wird ein stummer Ausgangszustand so gesetzt, dass er im Markup erhalten bleibt, etwa bei Serialisierung über outerHTML oder beim Klonen mit cloneNode(). Außerdem lässt sich damit ein Element nach load() auf seinen ursprünglichen Zustand zurücksetzen.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut muted vorhanden ist, sonst false. Die Eigenschaft ist les- und schreibbar.

Beispiele

Unterschied zwischen defaultMuted und muted

// HTML: <video id="clip" src="intro.mp4" muted></video>
const video = document.querySelector('#clip');

console.log(video.defaultMuted); // Attribut vorhanden
console.log(video.muted);        // aktueller Zustand

// Nutzer schaltet den Ton ein
video.muted = false;
console.log(video.muted, video.defaultMuted, video.hasAttribute('muted'));

true true false true true

Dynamisch erzeugtes, stummes Hintergrundvideo

const createBackgroundVideo = (src) => {
  const video = document.createElement('video');
  video.src = src;
  video.defaultMuted = true; // setzt das Attribut muted
  video.muted = true;        // setzt den aktuellen Zustand sicher
  video.autoplay = true;
  video.loop = true;
  video.playsInline = true;
  return video;
};

const bg = createBackgroundVideo('hero.mp4');
document.body.append(bg);
console.log(bg.outerHTML);

Player auf den Ausgangszustand zurücksetzen

const player = document.querySelector('audio');

const resetPlayer = () => {
  player.pause();
  player.currentTime = 0;
  // aktuellen Stummschaltungszustand auf den Standardwert zurücksetzen
  player.muted = player.defaultMuted;
};

document.querySelector('#reset').addEventListener('click', resetPlayer);

// Wichtig · Fallstricke

Kein Einfluss auf die laufende Wiedergabe: defaultMuted setzt nur das Attribut. Um den Ton sofort stummzuschalten, muss muted gesetzt werden.
Autoplay-Richtlinien: Browser erlauben automatisches Abspielen meist nur bei stummgeschalteten Medien. Für diese Prüfung zählt der Zustand muted. Bei dynamisch erzeugten Elementen sollte man deshalb beide Eigenschaften setzen, damit play() nicht mit NotAllowedError abgelehnt wird.
Ob das Attribut muted zur Laufzeit noch einmal übernommen wird, ist nicht in allen Browsern einheitlich. Deshalb sollte man sich nicht darauf verlassen.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Der Internet Explorer unterstützte sie nicht.

Siehe auch

HTMLMediaElement.muted HTMLMediaElement.volume HTMLMediaElement.autoplay HTMLMediaElement HTMLMeterElement.value HTMLTextAreaElement.defaultValue