Utiliser des images poster sur le contenu du plug-in

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

Heureusement, le paramètre de couverture respecte également le paramètre de couverture de la même manière que les éléments vidéo. Cela vous permet de spécifier une image à utiliser à la place du plug-in mis en pause, au lieu du frame sur lequel Chrome met en pause le contenu de votre plug-in.

Voici un exemple d'utilisation pratique. Si Chrome décide de mettre en pause flash.swf, poster.png s'affichera à la place. Si l'utilisateur clique sur l'affiche, le contenu Flash est lu 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. Elle peut donc également être compatible avec les écrans haute résolution. 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, elle risque d'être déformée sur l'écran de l'utilisateur.