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

Paul Kinlan

数週間前に、Chrome は、サイトのメイン コンテンツの周辺にあると検出されたプラグイン コンテンツを自動的に一時停止する新しいコンテンツ設定を発表しました。この設定は、Chrome 45 以降（2015 年 9 月の安定版）のすべてのユーザーを対象にリリースされます。これは CPU 使用率と消費電力の点でユーザーにとって有利ですが、ウェブサイトが提供するコンテンツの一部が表示されなくなる可能性があります。

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

以下に、実際に使用した例を示します。Chrome が flash.swf を一時停止すると、その代わりに 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>

使用する画像は、プラグイン コンテンツと同じサイズにする必要があります。そうしないと、ユーザーの画面で画像が歪む可能性があります。