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

Hace varias semanas, Chrome anunció una nueva configuración de contenido que detiene automáticamente el contenido de los complementos que detecta que es periférico del contenido principal del sitio y que estará disponible para todos los usuarios de Chrome 45 en adelante (establecimiento de septiembre de 2015). Esto representa una ventaja para tus usuarios en términos de uso de CPU y consumo de energía, pero puede provocar que no vean todo el contenido que proporciona tu sitio web.

Afortunadamente, la configuración también respeta el parámetro poster de una manera similar a los elementos de video. Esto te permite especificar una imagen que se debe usar en lugar del complemento pausado, en lugar del marco en el que Chrome pause el contenido del complemento.

Este es un ejemplo de cómo usarlo en la práctica. Si Chrome decide detener flash.swf, se mostrará poster.png en su lugar. Si el usuario hace clic en el póster, el contenido 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 con valores altos de DPI. Este es un ejemplo de la sintaxis 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 usa tenga las mismas dimensiones que el contenido del complemento; de lo contrario, la imagen podría terminar distorsionada en la pantalla del usuario.