플러그인 콘텐츠에 포스터 이미지 사용

몇 주 전, 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>

사용되는 이미지가 플러그인 콘텐츠와 동일한 크기여야 합니다. 그렇지 않으면 이미지가 사용자의 화면에서 왜곡될 수 있습니다.