Gedempte autoplay op mobiel - Zeg vaarwel tegen canvas-hacks en geanimeerde GIF's!

Sam Dutton

Gedempt automatisch afspelen van video wordt ondersteund door Chrome voor Android vanaf versie 53. Het afspelen van een video-element start automatisch zodra het in beeld komt als zowel autoplay als muted zijn ingeschakeld. Het afspelen van gedempte video's kan pragmatisch worden gestart met play() . Voorheen moest het afspelen op mobiele apparaten worden gestart met een gebruikersgebaar, ongeacht de gedempt-status.

<video playsinline autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

U kunt dit in actie zien door dit voorbeeld te bekijken. Het afspelen van de muted video start automatisch in Chrome 53 of hoger.

Schermafbeelding van de videospeler.

Bovendien kan gedempt afspelen nu worden gestart met de play() methode. Voorheen startte play() het afspelen alleen als dit via een gebruikersgebaar, zoals een klik op een knop, kwam. Vergelijk de volgende twee demo's op Android — probeer ze eerst op Chrome 53 en vervolgens op een oudere versie:

Wij raden u aan om waar mogelijk het autoplay -kenmerk te gebruiken en de play() methode alleen als dat echt nodig is.

Het is mogelijk om het geluid van een video programmatisch aan te zetten als reactie op een gebaar van de gebruiker, zoals een click . Als u echter probeert om het geluid van een video programmatisch aan te zetten zonder gebaar van de gebruiker, wordt het afspelen gepauzeerd.

Dankzij de wijziging muted autoplay is het ook mogelijk om play() te gebruiken met een video element dat niet in de DOM is aangemaakt, bijvoorbeeld om WebGL-weergave aan te sturen .

De play() -methode retourneert ook een promise , die kan worden gebruikt om te controleren of gedempt programmatisch afspelen is ingeschakeld. Een voorbeeld hiervan is te vinden op simpl.info/video/scripted .

Waarom deze verandering?

Automatisch afspelen was uitgeschakeld in eerdere versies van Chrome op Android, omdat het storend en dataverslindend kan zijn en veel gebruikers het niet prettig vinden .

Het uitschakelen van autoplay had het onbedoelde effect dat ontwikkelaars naar alternatieven zoals geanimeerde GIF's en <canvas> en <img> -hacks trokken. Deze technieken zijn veel slechter dan geoptimaliseerde video wat betreft stroomverbruik, prestaties, bandbreedtevereisten, datakosten en geheugengebruik. Video kan een hogere kwaliteit bieden dan geanimeerde GIF's, met een veel betere compressie: gemiddeld ongeveer 10 keer, en in het beste geval tot 100 keer. Videodecodering in JavaScript is mogelijk , maar het is een enorme aanslag op de batterij.

Vergelijk het volgende: de eerste is een video en de tweede is een geanimeerde GIF:

Clipvideo wordt afgespeeld.

Ze lijken behoorlijk op elkaar, maar de video is kleiner dan 200 KB en de geanimeerde GIF is groter dan 900 KB.

Chrome en andere browserleveranciers zijn extreem voorzichtig met de bandbreedte van gebruikers. Voor veel gebruikers in veel contexten vormen hoge datakosten vaak een grotere drempel voor toegang dan slechte connectiviteit. Gezien de prevalentie van tijdelijke oplossingen is gedempte autoplay niet iets dat kan worden geblokkeerd, dus het aanbieden van goede API's en standaardinstellingen is het beste wat het platform kan doen.

Het web is steeds meer mediagericht . Ontwerpers en ontwikkelaars blijven nieuwe en onvoorziene manieren vinden om video te gebruiken – en ze willen consistent gedrag op alle platforms, bijvoorbeeld bij het gebruik van achtergrondvideo als ontwerpelement. Gedempte autoplay maakt dit soort functionaliteit mogelijk op zowel mobiel als desktop.

De fijnere details

  • Vanuit toegankelijkheidsoogpunt kan automatisch afspelen bijzonder problematisch zijn. Chrome 53 en hoger op Android bieden een instelling om automatisch afspelen volledig uit te schakelen: selecteer Automatisch afspelen in de Media-instellingen.
  • Deze wijziging heeft geen invloed op het audio element: automatisch afspelen is nog steeds uitgeschakeld in Chrome op Android, omdat gedempt automatisch afspelen niet veel zin heeft voor audio.
  • Er is geen automatisch afspelen als de databesparingsmodus is ingeschakeld. Als de databesparingsmodus is ingeschakeld, is automatisch afspelen uitgeschakeld in de media-instellingen.
  • Gedempt automatisch afspelen werkt voor elk zichtbaar video-element in elk zichtbaar document, iframe of anderszins.
  • Onthoud dat u, om te profiteren van het nieuwe gedrag, zowel muted als autoplay moet toevoegen: vergelijk simpl.info/video met simpl.info/video/muted .

Steun

  • Gedempt automatisch afspelen wordt ondersteund door Safari op iOS 10 en later.
  • Automatisch afspelen, gedempt of niet, wordt al ondersteund op Android door Firefox en UC Browser: ze blokkeren geen enkele vorm van automatisch afspelen.

Meer informatie