在插件内容中使用海报图片

保罗·金兰

几周前，Chrome 宣布推出一项新的内容设置，可自动暂停插件内容。如果插件内容被检测为与网站主要内容相关，那么 Chrome 45 及更高版本将面向所有 Chrome 用户发布（2015 年 9 月稳定版功能）。这在 CPU 使用率和能耗方面对用户来说是一个胜利，但可能会导致用户看不到您的网站提供的完整内容。

幸运的是，此设置还会遵循 poster 参数的方式，方式与 video 元素类似。这样一来，您就可以指定应该用于替代已暂停插件的图片，而不是 Chrome 在哪个帧上暂停插件内容。

这里给出了一个实际运用示例。如果 Chrome 决定暂停 flash.swf，将改为在相应的位置显示 poster.png。如果用户点击海报，就会正常播放 Flash 内容。

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

poster 参数的值与 img 标记的 srcset 属性的解释方式相同，因此它也可以支持高 DPI 显示屏。下面是一个 srcset 语法示例：

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

请务必确保使用的图片与插件内容的尺寸相同，否则图片可能会在用户屏幕上失真