Posterbilder in Plug-in-Inhalten verwenden

Vor einigen Wochen hat Chrome eine neue Inhaltseinstellung angekündigt, mit der Plug-in-Inhalte, die als Peripherieteil des Hauptinhalts der Website erkannt werden, automatisch pausiert werden (ab September 2015 stabil). Dies ist ein Gewinn für Ihre Nutzer in Bezug auf CPU-Auslastung und Stromverbrauch, kann jedoch dazu führen, dass sie nicht den gesamten Inhalt Ihrer Website sehen.

Glücklicherweise wird bei dieser Einstellung der Parameter „poster“ auf ähnliche Weise berücksichtigt wie bei Videoelementen. So können Sie ein Bild angeben, das anstelle des pausierten Plug-ins verwendet werden soll, und nicht den Frame, in dem Chrome den Inhalt des Plug-ins pausiert.

Hier ist ein Beispiel für die Verwendung in der Praxis. Falls Chrome die Datei "flash.swf" pausiert, wird stattdessen "poster.png" angezeigt. Wenn der Nutzer auf das Poster klickt, werden die Flash-Inhalte wie gewohnt abgespielt.

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

Der Wert des „poster“-Parameters wird genauso interpretiert wie das „srcset“-Attribut eines img-Tags, sodass er auch Darstellungen mit hohem DPI-Wert unterstützt. Hier ein Beispiel für die srcset-Syntax:

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

Wichtig ist, dass das Bild die gleichen Abmessungen wie der Plug-in-Inhalt hat. Andernfalls könnte das Bild auf dem Bildschirm des Nutzers verzerrt werden.