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

ポール キンラン

数週間前、サイトのメイン コンテンツに関連していると判断されたプラグイン コンテンツを自動的に一時停止する新しいコンテンツ設定が Chrome で発表されました（Chrome 45 以降（2015 年 9 月公開））。 これは CPU 使用率と消費電力の点ではユーザーにメリットをもたらしますが、ウェブサイトで提供されるコンテンツがすべて表示されなくなる可能性があります。

幸いなことに、この設定では、動画要素と同様に poster パラメータも考慮されます。これにより、Chrome でプラグイン コンテンツを一時停止するフレームの代わりに、一時停止したプラグインの代わりに使用する画像を指定できます。

実際の使用例を以下に示します。Chrome で flash.copyright が一時停止された場合、代わりに poster.png が表示されます。ユーザーが Flash コンテンツよりもポスターをクリックすると、通常どおり再生されます。

<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>

使用する画像はプラグイン コンテンツと同じサイズにすることが重要です。サイズを合わせると、ユーザーの画面で画像が歪む可能性があります。