Posterimages gebruiken voor plug-incontent

Chrome heeft een paar weken geleden een nieuwe contentinstelling aangekondigd die plug-incontent automatisch onderbreekt. Deze instelling wordt live gezet voor alle gebruikers van Chrome 45 en hoger (stabiel september 2015). Dit is een voordeel voor je gebruikers wat betreft CPU-gebruik en stroomverbruik, maar kan ertoe leiden dat ze niet alle content zien die je website biedt.

Gelukkig respecteert de instelling ook de posterparameter op een vergelijkbare manier als video-elementen. Hiermee kun je een afbeelding opgeven die moet worden gebruikt in plaats van de onderbroken plug-in, in plaats van het frame waarop Chrome je plug-incontent onderbreekt.

Hier is een voorbeeld van hoe je dit in de praktijk gebruikt. Als Chrome besluit flash.swf te onderbreken, wordt poster.png getoond. Als de gebruiker op de poster klikt, wordt de Flash-content normaal afgespeeld.

<object data="http://example.com/flash.swf"  
        type="application/x-shockwave-flash"
        poster="poster.png">
</object>

De waarde van de parameter poster wordt op dezelfde manier geïnterpreteerd als het kenmerk srcset van een img-tag, dus deze kan ook schermen met een hoge DPI ondersteunen. Hier volgt een voorbeeld van de srcset-syntaxis:

<object data="http://example.com/flash.swf"  
        type="application/x-shockwave-flash"
        poster="snapshot1x.png 1x, snapshot2x.png 2x">
</object>

Het is belangrijk dat de gebruikte afbeelding dezelfde afmetingen heeft als de plug-incontent. Anders kan de afbeelding vervormd worden weergegeven op het scherm van de gebruiker.