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:

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

Rezultat:

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:

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:

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