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 complementos que detecta como periférico al contenido principal del sitio. Este parámetro se lanzará para todos los usuarios de Chrome 45 y versiones posteriores (versión estable de septiembre de 2015). Esto es beneficioso para tus usuarios en términos de uso de CPU y consumo de energía, pero puede hacer que no vean todo el contenido que proporciona tu sitio web.

Afortunadamente, el parámetro de configuración también respeta el parámetro de póster de manera similar a como lo hacen los elementos de video. Esto te permite especificar una imagen que se debe usar en lugar del complemento en pausa, en lugar del fotograma en el que Chrome pausa 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á normalmente.

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

El valor del parámetro poster se interpreta de la misma manera que el atributo srcset de una etiqueta img, por lo que también puede admitir pantallas de alta resolución. A continuación, se incluye 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 utilizada tenga las mismas dimensiones que el contenido del complemento. De lo contrario, la imagen podría distorsionarse en la pantalla del usuario.