Sử dụng hình ảnh áp phích trên nội dung trình bổ trợ

Vài tuần trước, Chrome công bố một chế độ cài đặt nội dung mới giúp tự động tạm dừng nội dung trình bổ trợ mà trình bổ trợ phát hiện là thiết bị ngoại vi với nội dung chính của trang web sẽ được cung cấp cho tất cả người dùng Chrome 45 trở đi (Chính thức vào tháng 9 năm 2015). Điều này giúp ích cho người dùng về mức sử dụng CPU và mức tiêu thụ điện năng, nhưng có thể khiến họ không nhìn thấy đầy đủ nội dung mà trang web của bạn cung cấp.

Thật may là chế độ cài đặt này cũng tôn trọng tham số áp phích theo cách tương tự như các phần tử video. Điều này cho phép bạn chỉ định hình ảnh sẽ được sử dụng thay cho trình bổ trợ bị tạm dừng, thay vì bất kỳ khung nào mà Chrome sẽ tạm dừng nội dung trình bổ trợ của bạn.

Sau đây là ví dụ về cách sử dụng trong thực tế. Nếu Chrome quyết định tạm dừng flash.docx, poster.png sẽ được hiển thị tại vị trí của nó. Nếu người dùng nhấp vào áp phích thì nội dung Flash sẽ phát như bình thường.

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

Giá trị của tham số poster được diễn giải giống như thuộc tính srcset của thẻ img, do đó, thuộc tính này cũng có thể hỗ trợ các màn hình có DPI cao. Dưới đây là ví dụ về cú pháp srcset:

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

Điều quan trọng là hình ảnh được sử dụng phải có cùng kích thước với nội dung trình bổ trợ, nếu không, hình ảnh đó có thể bị méo trên màn hình của người dùng