Keine.

Ein Promise, das aufgelöst wird, wenn die Wiedergabe gestartet wurde oder abgelehnt wird, falls die Wiedergabe aus irgendeinem Grund nicht gestartet werden kann.

Der Rejection-Handler des Promises wird mit einem DOMException-Objekt aufgerufen, das als einziger Eingabeparameter übergeben wird (im Gegensatz zu einer traditionellen Ausnahme, die geworfen wird). Mögliche Fehler sind:

NotAllowedError DOMException

Wird bereitgestellt, wenn der User-Agent (Browser) oder das Betriebssystem die Wiedergabe des Mediums im aktuellen Kontext oder in der aktuellen Situation nicht zulässt. Der Browser kann erfordern, dass der Benutzer die Medienwiedergabe ausdrücklich durch Klicken auf eine "Play"-Schaltfläche startet, beispielsweise aufgrund einer Permissions Policy.

NotSupportedError DOMException

Wird bereitgestellt, wenn die Medienquelle (die beispielsweise als MediaStream, MediaSource, Blob oder File angegeben werden kann) kein unterstütztes Medienformat darstellt.

Andere Ausnahmen können gemeldet werden, abhängig von den Implementierungsdetails des Browsers, der Implementierung des Mediaplayers und so weiter.

Obwohl der Begriff "Autoplay" gewöhnlich als Bezeichner für Seiten verstanden wird, die unmittelbar nach dem Laden des Mediums mit der Wiedergabe beginnen, gelten die Autoplay-Richtlinien der Webbrowser auch für jede skriptinitiierte Wiedergabe von Medien, einschließlich Aufrufen von play().

Wenn der Benutzeragent so konfiguriert ist, dass er keine automatische oder skriptinitiierte Wiedergabe von Medien erlaubt, wird durch Aufrufen von play() das zurückgegebene Promise sofort mit einem NotAllowedError abgelehnt. Webseiten sollten darauf vorbereitet sein, mit dieser Situation umzugehen. Beispielsweise sollte eine Seite keine Benutzeroberfläche präsentieren, die davon ausgeht, dass die Wiedergabe automatisch begonnen hat, sondern stattdessen ihre Benutzeroberfläche basierend darauf aktualisieren, ob das zurückgegebene Promise erfüllt oder abgelehnt wurde. Siehe das Beispiel unten für weitere Informationen.

Für noch tiefere Einblicke in Autoplay und die Blockierung von Autoplay, siehe unseren Artikel Autoplay-Leitfaden für Medien- und Web-Audio-APIs.

Dieses Beispiel zeigt, wie man bestätigt, dass die Wiedergabe begonnen hat, und wie man blockierte automatische Wiedergabe elegant behandelt.

Wenn dieses Beispiel ausgeführt wird, beginnt es damit, Referenzen zu dem <video>-Element sowie zu dem <button> zu sammeln, das verwendet wird, um die Wiedergabe ein- und auszuschalten. Es richtet dann einen Event-Handler für das click-Ereignis auf der Umschalttaste ein und versucht, die Wiedergabe automatisch zu starten, indem die async playVideo()-Funktion aufgerufen wird.

Eine Hilfsfunktion toggleButton() lässt uns definieren, was im Code geschehen soll, wenn wir ihr einen booleschen Wert übergeben, der den Wiedergabestatus darstellt (z.B. toggleButton(true)). Wenn die Wiedergabe erfolgreich ist, ändern sich der Schaltflächen-Text und das aria-label in "Pause". Wenn die Wiedergabe fehlschlägt, zeigt die Schaltfläche und aria-label "Play" an. Dies stellt sicher, dass die playButton mit dem Wiedergabestatus übereinstimmt, indem es auf die Auflösung oder Ablehnung des von play() zurückgegebenen Promise achtet:

<div class="video-box">
  <video
    id="video"
    width="480"
    loop
    src="https://developer.mozilla.org/shared-assets/videos/flower.mp4"></video>
  <button type="button" id="play-button" aria-label="Play"></button>
</div>

let videoElem = document.getElementById("video");
let playButton = document.getElementById("play-button");

playButton.addEventListener("click", handlePlayButton, false);
playVideo();

function toggleButton(playing) {
  if (playing) {
    playButton.textContent = "Pause";
    playButton.setAttribute("aria-label", "Pause");
  } else {
    playButton.textContent = "Play";
    playButton.setAttribute("aria-label", "Play");
  }
}

async function playVideo() {
  try {
    await videoElem.play();
    toggleButton(true);
  } catch (err) {
    toggleButton(false);
  }
}

function handlePlayButton() {
  if (videoElem.paused) {
    playVideo();
  } else {
    videoElem.pause();
    toggleButton(false);
  }
}

.video-box {
  position: relative;
}

#video {
  border: 2px solid black;
}

#play-button {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 8px 12px;
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
}

• Web-Medientechnologien
• Lernen: HTML-Video und -Audio
• Autoplay-Leitfaden für Medien- und Web-Audio-APIs
• Verwendung der Web-Audio-API