Utiliser des images poster sur le contenu du plug-in

Il y a plusieurs semaines, Chrome a annoncé le lancement d'un nouveau paramètre de contenu qui suspend automatiquement le contenu des plug-ins, détecté comme périphérique par rapport au contenu principal du site. Il sera mis en ligne pour tous les utilisateurs de Chrome 45 et versions ultérieures (version stable : septembre 2015). C'est une victoire pour vos utilisateurs en termes d'utilisation du processeur et de consommation d'énergie, mais ils peuvent ne pas voir l'intégralité du contenu fourni par votre site Web.

Heureusement, ce paramètre respecte le paramètre poster de la même manière que les éléments vidéo. Vous pouvez ainsi spécifier une image à utiliser à la place du plug-in suspendu, au lieu de l'image sur laquelle Chrome met en pause le contenu du plug-in.

Voici un exemple d'utilisation pratique. Si Chrome décide de mettre en pause flash.swf, poster.png s'affiche à la place. Si l'utilisateur clique sur l'affiche, le contenu Flash se lance normalement.

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

La valeur du paramètre poster est interprétée de la même manière que l'attribut srcset d'une balise img, afin qu'elle soit également compatible avec les affichages à PPP élevé. Voici un exemple de syntaxe srcset:

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

Il est important que l'image utilisée ait les mêmes dimensions que le contenu du plug-in, sinon l'image risque d'être déformée sur l'écran de l'utilisateur.