Cómo usar imágenes de póster en el contenido de los complementos

Hace varias semanas, Chrome anunció un nuevo parámetro de configuración de contenido que pausa automáticamente el contenido de los complementos que detecta como periférico al contenido principal del sitio. Esta función se lanzará para todos los usuarios de Chrome 45 en adelante (versión estable de septiembre de 2015). Esto es una ventaja para los usuarios en términos de uso de la CPU y consumo de energía, pero puede provocar que no vean todo el contenido que proporciona tu sitio web.

Por suerte, la configuración también respeta el parámetro de póster de una manera similar a la que lo hacen los elementos de video. Esto te permite especificar una imagen que se debe usar en lugar del complemento detenido, en lugar de cualquier fotograma en el que Chrome detenga el contenido del complemento.

Este es un ejemplo de cómo usarlo en la práctica. Si Chrome decide pausar flash.swf, se mostrará poster.png en su lugar. Si el usuario hace clic en el póster, el contenido de Flash se reproducirá como de costumbre.

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

El valor del parámetro de póster se interpreta de la misma manera que el atributo srcset de una etiqueta img, por lo que también puede admitir pantallas de alta densidad de píxeles. Este es un ejemplo de la sintaxis de srcset:

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

Es importante que la imagen que se use tenga las mismas dimensiones que el contenido del complemento. De lo contrario, la imagen podría distorsionarse en la pantalla del usuario.