Utilizzo delle immagini poster nei contenuti dei plug-in

Diverse settimane fa, Chrome ha annunciato una nuova impostazione dei contenuti che mette automaticamente in pausa i contenuti dei plug-in che rileva come periferici rispetto ai contenuti principali del sito. Questa impostazione verrà implementata per tutti gli utenti di Chrome 45 e versioni successive (versione stabile di settembre 2015). Si tratta di un vantaggio per gli utenti in termini di utilizzo della CPU e consumo energetico, ma potrebbe comportare la mancata visualizzazione dell'intero contenuto fornito dal tuo sito web.

Fortunatamente, l'impostazione rispetta anche il parametro poster in modo simile agli elementi video. Ciò ti consente di specificare un'immagine da utilizzare al posto del plug-in in pausa, anziché il frame su cui Chrome mette in pausa i contenuti del plug-in.

Ecco un esempio di utilizzo pratico. Se Chrome decide di mettere in pausa flash.swf, al suo posto verrà mostrato poster.png. Se l'utente fa clic sul poster, i contenuti Flash verranno riprodotti normalmente.

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

Il valore del parametro poster viene interpretato allo stesso modo dell'attributo srcset di un tag img, quindi può supportare anche display ad alta risoluzione. Ecco un esempio della sintassi srcset:

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

È importante che l'immagine utilizzata abbia le stesse dimensioni dei contenuti del plug-in, altrimenti l'immagine potrebbe risultare distorta sullo schermo dell'utente.