Menggunakan gambar poster pada konten plugin

Beberapa minggu yang lalu, Chrome mengumumkan setelan konten baru yang otomatis menjeda konten plugin yang terdeteksi sebagai konten periferal dari konten utama situs akan diaktifkan untuk semua pengguna Chrome 45 dan yang lebih baru (Stabil September 2015). Hal ini menguntungkan pengguna Anda dalam hal penggunaan CPU dan konsumsi daya, tetapi dapat mengakibatkan mereka tidak melihat konten lengkap yang disediakan situs Anda.

Untungnya, setelan ini juga mematuhi parameter poster dengan cara yang serupa dengan elemen video. Dengan demikian, Anda dapat menentukan gambar yang akan digunakan sebagai pengganti plugin yang dijeda, bukan frame mana pun yang digunakan Chrome untuk menjeda konten plugin Anda.

Berikut contoh penggunaannya dalam praktik. Jika Chrome memutuskan untuk menjeda flash.swf, poster.png akan ditampilkan sebagai gantinya. Jika pengguna mengklik poster, konten Flash akan diputar seperti biasa.

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

Nilai parameter poster ditafsirkan dengan cara yang sama seperti atribut srcset tag img, sehingga dapat mendukung tampilan DPI tinggi juga. Berikut contoh sintaksis srcset:

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

Penting agar gambar yang digunakan memiliki dimensi yang sama dengan konten plugin - jika tidak, gambar dapat terdistorsi di layar pengguna