Poster Attribute
This page lists support for setting a poster image, displayed before playback of the video starts. We tested against the following expectations:
- The poster image should always be displayed before playback, regardless the setting of the preload attribute. This is by far the most important requirement.
- The video tag should contain the poster to its display area. This means that black borders show if the poster has a different aspect ratio. Other behavior (like a disproportionate scale to fill the area or a proportionate scale to cover the area) are in conflict with the HTML5 spec.
- For audio files, the poster image should stay visible at all times, since there is no video frames to display.
Results
| Browser | Displayed | Object fit | Audio poster |
|---|---|---|---|
| Firefox 7 | yes | fill | stays visible |
| Firefox 11 | yes | fill | stays visible |
| Chrome 15 | yes | contain | dropped 1, 3 |
| Safari 5.1 | yes | contain | dropped 1, 3 |
| Internet Explorer 9 | sometimes 2 | fill | stays visible |
| Opera 11.5 | yes | contain | stays visible |
| iOS 4 (iPod Touch 4) | yes | contain | dropped 1 |
| iOS 5 (iPad 1) | yes | contain | dropped 1 |
| Android 2.2 (HTC Legend) | yes | contain | dropped 1 |
| Android 2.3 (HTC Desire) | yes | contain | dropped 1 |
| Android 4.0 (Galaxy S2) | yes | contain | dropped 1 |
| WinPho 7.5 (HTC Radar) | yes | fill | dropped 1 |
- During playback, a black/blank screen is showing.
- Poster shows only when preload is set to none or metadata.
- A bug report exists.
See the W3C video spec for more details on the poster attribute.
Test Tags
Tag with poster image and video file:
Tag with poster image and audio file: