Usar imagens de pôster no conteúdo do plug-in

Há algumas semanas, o Chrome anunciou uma nova configuração de conteúdo que pausa automaticamente o conteúdo do plug-in detectado como periférico ao conteúdo principal do site. Ela será ativada para todos os usuários do Chrome 45 e versões mais recentes (versão estável de setembro de 2015). Isso é uma vantagem para os usuários em termos de uso da CPU e consumo de energia, mas pode fazer com que eles não vejam todo o conteúdo fornecido pelo site.

Felizmente, a configuração também respeita o parâmetro de imagem em miniatura de forma semelhante aos elementos de vídeo. Isso permite especificar uma imagem que será usada no lugar do plug-in pausado, em vez de qualquer frame em que o Chrome pausa o conteúdo do plug-in.

Confira um exemplo de como usar na prática. Se o Chrome decidir pausar flash.swf, poster.png vai ser mostrado no lugar dele. Se o usuário clicar no cartaz, o conteúdo do Flash será reproduzido normalmente.

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

O valor do parâmetro "poster" é interpretado da mesma forma que o atributo srcset de uma tag img, para que ele também possa oferecer suporte a telas de alta DPI. Confira um exemplo da sintaxe srcset:

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

É importante que a imagem usada tenha as mesmas dimensões do conteúdo do plug-in. Caso contrário, a imagem pode ficar distorcida na tela do usuário.