HTMLMediaElement.play() retourneert een belofte

Jeff Posnick

Het automatisch afspelen van audio en video op internet is een krachtige mogelijkheid, waarvoor op verschillende platforms verschillende beperkingen gelden. Tegenwoordig staan ​​de meeste desktopbrowsers altijd toe dat webpagina's <video> of <audio> afspelen via JavaScript zonder tussenkomst van de gebruiker. De meeste mobiele browsers vereisen echter een expliciet gebruikersgebaar voordat door JavaScript geïnitieerd afspelen kan plaatsvinden. Dit zorgt ervoor dat mobiele gebruikers, van wie velen betalen voor bandbreedte of die zich mogelijk in een openbare omgeving bevinden, niet per ongeluk beginnen met het downloaden en afspelen van media zonder expliciete interactie met de pagina.

Het is historisch gezien moeilijk geweest om te bepalen of gebruikersinteractie vereist is om het afspelen te starten, en om de fouten te detecteren die optreden wanneer (automatisch) afspelen wordt geprobeerd en mislukt. Er zijn verschillende oplossingen , maar deze zijn niet ideaal. Een verbetering van de onderliggende play() methode om deze onzekerheid aan te pakken had al lang moeten plaatsvinden, en dit heeft nu het webplatform bereikt, met een eerste implementatie in Chrome 50 .

Een play() aanroep op een a <video> of <audio> -element retourneert nu een Promise . Als het afspelen slaagt, wordt aan de belofte voldaan, en als het afspelen mislukt, wordt de belofte afgewezen, samen met een foutmelding waarin de fout wordt uitgelegd. Hiermee kunt u intuïtieve code schrijven, zoals de volgende:

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.
    });
}

Naast het detecteren of de methode play() succesvol was, kunt u met de nieuwe op Promise gebaseerde interface bepalen wanneer de methode play() is geslaagd. Er zijn contexten waarin een webbrowser kan besluiten de start van het afspelen uit te stellen. Desktop Chrome begint bijvoorbeeld pas met het afspelen van een <video> als het tabblad zichtbaar is. De belofte zal pas worden vervuld als het afspelen daadwerkelijk is gestart, wat betekent dat de code in then() pas wordt uitgevoerd als de media wordt afgespeeld. Eerdere methoden om te bepalen of play() succesvol is, zoals het wachten op een bepaalde tijd voor een playing en het aannemen van een mislukking als deze niet wordt geactiveerd, zijn gevoelig voor valse negatieven in scenario's met vertraagd afspelen.

We hebben een live voorbeeld van deze nieuwe functionaliteit gepubliceerd. Bekijk het in een browser zoals Chrome 50 die deze op Promise gebaseerde interface ondersteunt. Wees gewaarschuwd: de pagina speelt automatisch muziek af wanneer u deze bezoekt. (Tenzij dat natuurlijk niet het geval is!)

Gevarenzone

<source> binnen <video> zorgt ervoor dat play() de belofte nooit afwijst

Voor <video src="not-existing-video.mp4"\> wordt de belofte play() afgewezen, zoals verwacht, omdat de video niet bestaat. Voor <video><source src="not-existing-video.mp4" type='video/mp4'></video> de belofte play() nooit afgewezen. Het gebeurt alleen als er geen geldige bronnen zijn.

Chroombug