几周前,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>
海报参数的值的解读方式与 img 标记的 srcset 属性相同,因此它也支持高 DPI 显示屏。以下是 srcset 语法的示例:
<object data="http://example.com/flash.swf"
type="application/x-shockwave-flash"
poster="snapshot1x.png 1x, snapshot2x.png 2x">
</object>
请务必使用与插件内容尺寸相同的图片,否则图片可能会在用户屏幕上失真