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

Cách đây vài tuần, Chrome đã công bố một chế độ cài đặt nội dung mới tự động tạm dừng nội dung bổ trợ. Chế độ này sẽ được triển khai cho tất cả người dùng Chrome từ phiên bản 45 trở lên (phiên bản ổn định từ tháng 9 năm 2015) khi phát hiện thấy nội dung đó không phải là nội dung chính của trang web. Đây là một lợi thế cho người dùng của bạn 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 xem được toàn bộ nội dung mà trang web của bạn cung cấp.

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

Sau đây là một ví dụ về cách sử dụng tính năng này trong thực tế. Nếu Chrome quyết định tạm dừng flash.swf, thì poster.png sẽ xuất hiện thay thế. 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 theo cách tương tự như thuộc tính srcset của thẻ img, vì vậy, tham số này cũng có thể hỗ trợ 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 dùng phải có cùng kích thước với nội dung của trình bổ trợ. Nếu không, hình ảnh có thể bị biến dạng trên màn hình của người dùng