Ce face <video>
Tagul <video> a revoluționat web-ul prin eliminarea nevoii de playere externe (precum Flash). Permite redarea directă a fișierelor video MP4, WebM sau Ogg.
Atributul controls afișează butoanele implicite ale browserului (Play, Pauză, Bară de derulare, Volum, Fullscreen). Atributul poster afișează o imagine de copertă înainte ca utilizatorul să apese Play.
Atribute
| Atribut | Descriere |
|---|---|
src |
Adresa fișierului video. |
controls |
Afișează controalele native de redare (Play, volum, derulare). |
poster |
URL-ul imaginii de previzualizare afișată înainte de redare. |
autoplay |
Pornește redarea automat (browserele cer și atributul muted pentru a permite autoplay). |
muted |
Dezactivează sunetul în mod implicit. |
loop |
Reia redarea de la început la finalizare. |
Exemple
Exemplul 1: Player video cu controale și imagine de copertă
Oferă o experiență multimedia nativă completă.
<video width="640" height="360" controls poster="/imagini/coperta-video.jpg">
<source src="/video/tutorial-html.mp4" type="video/mp4">
<source src="/video/tutorial-html.webm" type="video/webm">
Browserul tău nu suportă elementul video.
</video>
Ce afișează browserul
Un player video de 640x360 cu imaginea de copertă și butoanele native Play, Pauză și Volum.
Greșeli frecvente
- Folosirea autoplay fără muted; toate browserele moderne blochează redarea automată a videoclipurilor cu sunet pentru a proteja utilizatorul.
- Omiterea atributului controls; fără el, videoclipul nu are butoane și utilizatorul nu îl poate porni.