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

幾週前,Chrome 宣布推出新的內容設定,可自動暫停外掛程式內容。這項設定會偵測網站的主要內容,並暫停周邊內容,預計在 Chrome 45 以上版本 (2015 年 9 月穩定版) 中向所有使用者推出。 就 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>

請務必使用與外掛程式內容相同尺寸的圖片,否則圖片可能會在使用者螢幕上變形