Die automatische Wiedergabe von Audio- und Videoinhalten im Web ist eine nützliche Funktion, die auf verschiedenen Plattformen unterschiedlichen Einschränkungen unterliegt.
Heutzutage erlauben die meisten Desktop-Browser die Wiedergabe von <video> oder <audio> auf Webseiten über JavaScript immer ohne Nutzerinteraktion.
In den meisten mobilen Browsern ist jedoch eine explizite Nutzeraktion erforderlich, bevor die JavaScript-initiierte Wiedergabe gestartet werden kann. So wird verhindert, dass mobile Nutzer, von denen viele für die Bandbreite bezahlen oder sich in einer öffentlichen Umgebung befinden, versehentlich Medien herunterladen und abspielen, ohne ausdrücklich mit der Seite zu interagieren.
Bisher war es schwierig zu bestimmen, ob für die Wiedergabe eine Nutzerinteraktion erforderlich ist, und Fehler zu erkennen, die auftreten, wenn ein (automatischer) Wiedergabeversuch fehlschlägt. Es gibt verschiedene Problemumgehungen, die aber nicht ideal sind. Eine Verbesserung der zugrunde liegenden play()-Methode zur Behebung dieser Unsicherheit war schon lange überfällig. Diese Verbesserung wurde nun in die Webplattform übernommen und in Chrome 50 implementiert.
Ein play()-Aufruf für ein <video>- oder <audio>-Element gibt jetzt ein Promise zurück. Wenn die Wiedergabe erfolgreich ist, wird das Versprechen erfüllt. Wenn die Wiedergabe fehlschlägt, wird das Versprechen abgelehnt und eine Fehlermeldung mit einer Erklärung für den Fehler angezeigt. So 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 versprechenbasierten Schnittstelle können Sie nicht nur feststellen, ob die play()-Methode erfolgreich war, sondern auch, wann die play()-Methode erfolgreich war. Es gibt Kontexte, in denen ein Webbrowser den Beginn der Wiedergabe verzögern kann. Beispielsweise beginnt Chrome auf dem Computer erst dann mit der Wiedergabe eines <video>, 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 die Medien wiedergegeben werden. Bisherige Methoden zur Bestimmung, ob play() erfolgreich war, wie z. B. das Warten auf ein playing-Ereignis für einen bestimmten Zeitraum und das Annehmen eines Fehlers, wenn es nicht ausgelöst wird, sind bei verzögerten Wiedergabeszenarien anfällig für falsch negative Ergebnisse.
Wir haben ein Livebeispiel für diese neue Funktion veröffentlicht. Sie können sie in einem Browser wie Chrome 50 aufrufen, der diese Promise-basierte Schnittstelle unterstützt. Achtung: Auf der Seite wird automatisch Musik abgespielt, wenn du sie besuchst. (Es sei denn, das ist nicht der Fall.)
Gefahrenzone
<source> in <video> macht play()-Versprechen, das niemals abgelehnt wird
Für <video src="not-existing-video.mp4"\> wird die play()-Zusage wie erwartet abgelehnt, da das Video nicht existiert. Bei <video><source src="not-existing-video.mp4" type='video/mp4'></video> wird das play()-Versprechen nie abgelehnt. Das passiert nur, wenn keine gültigen Quellen vorhanden sind.