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

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

<video 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 bezoeken. Het afspelen van de muted video start automatisch in Chrome 53 of hoger.

Screenshot van de videospeler.

Bovendien kan gedempt afspelen nu worden gestart met behulp van de play() -methode. Voorheen startte play() alleen het afspelen als het afkomstig was van een gebruikersgebaar, zoals een klik op een knop. Vergelijk de volgende twee demo's op Android: probeer ze in Chrome 53 en vervolgens in een oudere versie:

We raden u aan waar mogelijk het autoplay attribuut te gebruiken, en de play() methode alleen indien nodig.

Het is mogelijk om het dempen van een video programmatisch op te heffen als reactie op een gebruikersgebaar, zoals een click , maar als je probeert het dempen van een video programmatisch op te heffen zonder een gebruikersgebaar, wordt het afspelen gepauzeerd.

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

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

Waarom de verandering?

Autoplay was uitgeschakeld in eerdere versies van Chrome op Android omdat het storend kan zijn, veel data verbruikt en veel gebruikers er niet van houden .

Het uitschakelen van autoplay had het onbedoelde effect dat ontwikkelaars naar alternatieven zoals geanimeerde GIF's en <canvas> - en <img> -hacks werden gedreven. Deze technieken zijn veel slechter dan geoptimaliseerde video in termen van 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 op zijn best tot 100 keer. Videodecodering in JavaScript is mogelijk , maar het vergt enorm veel batterijvermogen.

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

Clipvideo afspelen.

Ze lijken behoorlijk op elkaar, maar de video is minder dan 200 KB groot en de geanimeerde GIF is meer dan 900 KB.

Chrome en andere browserleveranciers zijn uiterst voorzichtig met de bandbreedte van gebruikers. Voor veel gebruikers in veel contexten vormen hoge datakosten vaak een grotere toegangsbarrière 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 internet is steeds meer mediagericht . Ontwerpers en ontwikkelaars blijven nieuwe en onvoorziene manieren vinden om video te gebruiken – en ze willen consistent gedrag op verschillende platforms, bijvoorbeeld bij het gebruik van achtergrondvideo als ontwerpelement. Gedempt autoplay maakt functionaliteit als deze mogelijk op zowel mobiel als desktop.

De fijnere punten

  • Vanuit het oogpunt van toegankelijkheid kan autoplay bijzonder problematisch zijn. Chrome 53 en hoger op Android bieden een instelling om autoplay volledig uit te schakelen: selecteer in Media-instellingen Autoplay.
  • Deze wijziging heeft geen invloed op het audio element: autoplay is nog steeds uitgeschakeld in Chrome op Android, omdat gedempt autoplay niet veel zin heeft voor audio.
  • Er is geen autoplay als de Data Saver-modus is ingeschakeld. Als de Databesparingsmodus is ingeschakeld, is automatisch afspelen uitgeschakeld in Media-instellingen.
  • Gedempt automatisch afspelen werkt voor elk zichtbaar video-element in elk zichtbaar document, iframe of anderszins.
  • Houd er rekening mee dat u, om van het nieuwe gedrag te kunnen profiteren, 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 hoger.
  • Autoplay, al dan niet gedempt, wordt op Android al ondersteund door Firefox en UC Browser: ze blokkeren geen enkele vorm van autoplay.

Meer te weten komen