Element media - atrybut "poster"
- Data publikacji
- Ostatnio edytowano
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="https://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="https://webkod.pl/files/html/film-01.mp4" poster="https://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 https://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 https://webkod.pl/files/html/film-01-okladka-01.png
, ponieważ do wspomnianego elementu video
został dodany atrybut poster
wraz z wartością https://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="https://webkod.pl/files/html/utwor-01.mp3" poster="https://webkod.pl/files/html/utwor-01-okladka-01.png" controls></video>
Rezultat: