# Element media - atrybut "poster"

Za pomocą elementu `video` w oknie przeglądarki internetowej możemy wyświetlić zasób multimedialny, który to zasób multimedialny może między innymi posiadać obraz (np. wideo).

Gdy wartością atrybutu `preload` elementu `video` jest wartość różna od wartości `none`, wtedy w oknie przeglądarki internetowej mogą pojawić się różne domyślne informacje o zasobie internetowym reprezentowanym przez dany element `video` (np. pierwsza klatka posiadana przez wspomniany zasób internetowy).

Przykład:

```html
<video src="./files/html/film-01.mp4" controls></video>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2Fq4XCY4dCccm2sOmw2Xpo%2Fimage.png?alt=media&#x26;token=cdc39732-212e-48a7-b26c-45fa33f7cc7d" alt=""><figcaption></figcaption></figure>

Jeżeli chcemy mieć wpływ na to, jaki obrazek powinien być widoczny w widocznym obszarze elementu `video`, przed rozpoczęciem odtwarzania zasobu internetowego reprezentowanego przez dany element `video`, wtedy należy skorzystać z atrybutu poster.

Przykład:

```
<video src="./files/html/film-01.mp4" poster="./files/html/film-01-okladka-01.png" controls></video>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2F6wHcS7kDY51jPJ4q7OvW%2Fimage.png?alt=media&#x26;token=e9c35ad1-44ba-437b-9c70-841060dd5959" alt=""><figcaption></figcaption></figure>

Przed rozpoczęciem odtwarzania zasobu internetowego `film-01.mp4` znajdującego się pod adresem `./files/html/film-01.mp4` oraz reprezentowanego przez przykładowy element `video`, w widocznym obszarze wspomnianego elementu `video` widoczny jest obrazek znajdujący się pod adresem `./files/html/film-01-okladka-01.png`, ponieważ do wspomnianego elementu `video` został dodany atrybut `poster` wraz z wartością `./files/html/film-01-okladka-01.png`.

Ponadto, gdy element `video` reprezentuje zasób internetowy w postaci pliku `.mp3`, wtedy również możemy skorzystać z atrybutu `poster`.

Przykład:

```html
<video src="./files/html/utwor-01.mp3" poster="./files/html/utwor-01-okladka-01.png" controls></video>
```
