Ostatnio edytowany:

Element media - atrybut "poster"

Autor: Virtual Patriot

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="http://webkod.pl/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="http://webkod.pl/files/html/film-01.mp4" poster="http://webkod.pl/files/html/film-01-okladka-01.png" controls></video>

Rezultat:

Przed rozpoczęciem odtwarzania zasobu internetowego film-01.mp4 znajdującego się pod adresem http://webkod.pl/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 http://webkod.pl/files/html/film-01-okladka-01.png, ponieważ do wspomnianego elementu video został dodany atrybut poster wraz z wartością http://webkod.pl/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="http://webkod.pl/files/html/utwor-01.mp3" poster="http://webkod.pl/files/html/utwor-01-okladka-01.png" controls></video>

Rezultat: