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

폴 킨란

몇 주 전, Chrome은 플러그인 콘텐츠를 자동으로 일시중지하는 새로운 콘텐츠 설정을 발표한 바 있습니다. 플러그인 콘텐츠가 사이트의 주요 콘텐츠에 연결된 것으로 감지되면 Chrome 45 이상의 모든 사용자에게 적용됩니다 (2015년 9월 공개). 이렇게 하면 CPU 사용량 및 전력 소비 측면에서 사용자에게 도움이 되지만, 사용자가 웹사이트에서 제공하는 전체 콘텐츠를 보지 못할 수 있습니다.

다행히 이 설정은 동영상 요소와 비슷한 방식으로 poster 매개변수를 고려합니다. 이렇게 하면 Chrome에서 플러그인 콘텐츠를 일시중지하는 프레임 대신 일시중지된 플러그인 대신 사용할 이미지를 지정할 수 있습니다.

실제 사용 예를 살펴보겠습니다. Chrome에서 flash.swf를 일시중지하기로 하면 poster.png가 대신 표시됩니다. 사용자가 포스터를 클릭하면 플래시 콘텐츠가 정상적으로 재생됩니다.

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

poster 매개변수의 값은 img 태그의 srcset 속성과 같은 방식으로 해석되므로 DPI가 높은 디스플레이도 지원할 수 있습니다. 다음은 srcset 구문의 예입니다.

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

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