几周前,Chrome 宣布了一项新的内容设置,该设置可自动暂停检测到的与网站主要内容无关的插件内容,并将面向所有 Chrome 45 及更高版本(稳定版,2015 年 9 月)的用户推出。 这在 CPU 使用率和能耗方面对用户有利,但可能会导致用户无法看到您网站提供的完整内容。
幸运的是,该设置也以与视频元素类似的方式支持 poster 参数。这样一来,您就可以指定一个图片来代替暂停的插件,而不是 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>
请务必确保所用图片的尺寸与插件内容相同,否则图片最终可能会在用户屏幕上变形