在外掛程式內容中使用海報圖片

數週前,Chrome 宣布了一項新的內容設定,會自動暫停外掛程式內容,發現該設定會與網站的主要內容密切相關 (2015 年 9 月穩定版),向所有 Chrome 使用者生效。 這對使用者來說是相當成功的 CPU 使用率與耗電量,但可能無法讓他們看見您網站提供的完整內容。

幸好,這項設定也會尊重海報參數,做法與影片元素類似。 可讓您指定要使用的圖片取代暫停的外掛程式,而非 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>

請注意,您使用的圖片尺寸必須與外掛程式內容相同,否則圖片可能會在使用者的螢幕上扭曲