HTMLMediaElement.play() gibt ein Promise zurück

Die automatische Wiedergabe von Audio- und Videoinhalten im Web ist eine leistungsstarke Funktion, die auf verschiedenen Plattformen unterschiedlichen Einschränkungen unterliegt. Heutzutage lassen die meisten Desktop-Browser immer zu, dass Webseiten die <video>- oder <audio>-Wiedergabe über JavaScript ohne Nutzerinteraktion starten. Die meisten mobilen Browser erfordern jedoch eine explizite Nutzergeste, bevor eine durch JavaScript initiierte Wiedergabe erfolgen kann. Dadurch wird sichergestellt, dass mobile Nutzer, von denen viele für Bandbreite bezahlen oder die sich möglicherweise in einer öffentlichen Umgebung befinden, nicht versehentlich Medien herunterladen und abspielen, ohne explizit mit der Seite zu interagieren.

In der Vergangenheit war es schwierig, zu ermitteln, ob eine Nutzerinteraktion erforderlich ist, um die Wiedergabe zu starten, und die Fehler zu erkennen, die auftreten, wenn die (automatische) Wiedergabe fehlschlägt. Es gibt verschiedene Problemumgehungen, die jedoch nicht ideal sind. Eine Verbesserung der zugrunde liegenden Methode play() zur Bewältigung dieser Unsicherheit ist schon lange überfällig. Sie ist inzwischen mit einer ersten Implementierung in Chrome 50 auf der Webplattform angekommen.

Bei einem play()-Aufruf für ein <video>- oder <audio>-Element wird jetzt ein Promise-Objekt zurückgegeben. Wenn die Wiedergabe erfolgreich ist, wird das Versprechen erfüllt. Wenn die Wiedergabe fehlschlägt, wird das Versprechen zusammen mit einer Fehlermeldung abgelehnt, die den Fehler erklärt. Auf diese Weise können Sie intuitiven Code wie den folgenden schreiben:

var playPromise = document.querySelector('video').play();

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
    playPromise.then(function() {
    // Automatic playback started!
    }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
    });
}

Mit der neuen Promise-basierten Schnittstelle können Sie nicht nur feststellen, ob die Methode play() erfolgreich war, sondern auch, wann die Methode play() erfolgreich war. Es gibt Kontexte, in denen ein Webbrowser den Start der Wiedergabe verzögern kann. Beispielsweise startet Chrome auf dem Computer die Wiedergabe eines <video> erst, wenn der Tab sichtbar ist. Das Versprechen wird erst erfüllt, wenn die Wiedergabe tatsächlich gestartet wurde. Das bedeutet, dass der Code in then() erst ausgeführt wird, wenn das Medium abgespielt wird. Bisherige Methoden, mit denen festgestellt werden kann, ob play() erfolgreich ist, wie das Warten auf eine bestimmte Zeit auf ein playing-Ereignis und die Annahme eines Fehlers, wenn das Ereignis nicht ausgelöst wird, sind in Szenarien mit verzögerter Wiedergabe anfällig für falsch negative Ergebnisse.

Für diese neue Funktion haben wir ein Live-Beispiel veröffentlicht. Rufen Sie sie in einem Browser wie Chrome 50 auf, der diese Promise-basierte Oberfläche unterstützt. Achtung: Sobald Sie die Seite aufrufen, wird automatisch Musik abgespielt. (außer wenn das natürlich nicht!)

Gefahrenbereich

<source> in <video> macht play() zusagen, wird nie abgelehnt

Für <video src="not-existing-video.mp4"\> wird das Promise play() wie erwartet abgelehnt, da das Video nicht existiert. Bei <video><source src="not-existing-video.mp4" type='video/mp4'></video> lehnt das Promise play() niemals ab. Dies geschieht nur, wenn keine gültigen Quellen vorhanden sind.

Chromium-Programmfehler