プラグイン コンテンツでのポスター画像の使用

Paul Kinlan

数週間前、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>

使用する画像のサイズがプラグイン コンテンツと同じであることが重要です。そうでない場合、ユーザーの画面で画像が歪んで表示される可能性があります。