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

Há várias semanas, o Chrome anunciou uma nova configuração de conteúdo que pausa automaticamente o conteúdo de plug-in que detecta ser periférico do conteúdo principal do site. Ela será ativada para todos os usuários do Chrome 45 e posteriores (versão estável em setembro de 2015). Isso é uma vitória para os usuários em termos de uso da CPU e consumo de energia, mas pode resultar na não exibição do conteúdo completo que o site oferece.

Felizmente, a configuração também respeita o parâmetro poster de maneira semelhante aos elementos de vídeo. Isso permite que você especifique uma imagem que precisa ser usada no lugar do plug-in pausado, em vez de qualquer frame que o Chrome pause o conteúdo do plug-in.

Aqui está um exemplo de como usá-lo na prática. Se o Chrome decidir pausar o flash.swf, o poster.png será exibido no lugar dele. Se o usuário clicar no pôster, o conteúdo em 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 maneira que o atributo srcset de uma tag img, portanto, ele também oferece suporte a exibições de alto DPI. Veja 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.