Video

Pentru redarea videoclipurilor în HTML5 se folosește elementul video. Pentru a configura acest element, putem folosi următoarele atribute:

src: sursa videoclipului, aceasta poate fi un fișier video
width: lățimea elementului
height: înălțimea elementului
controls: adaugă elemente de control pentru redare
autoplay: setează redarea automată
loop: setează repetarea videoclipului
muted: dezactivează sunetul implicit

Deși putem seta lățimea și înălțimea, acestea nu vor afecta raportul de aspect al videoclipului. De exemplu, dacă videoclipul are formatul 375×240, atunci, de exemplu, la setările width="375" height="280" videoclipul va fi centrat în spațiul de 280 de pixeli în HTML. Acest lucru permite evitarea distorsiunilor care ar apărea la întindere.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Video în HTML5 </title>
</head>
<body>
<video src="fox.mp4" width="400" height="300" controls></video>
</body>
</html>

Aplicăm atributele autoplay și loop:

<video src="fox.mp4" width="400" height="300" controls autoplay loop></video>

Acum videoclipul va fi redat automat un număr infinit de ori.

Dacă dorim să dezactivăm sunetul la redare, putem folosi atributul muted:

<video src="fox.mp4" width="400" height="300" controls muted></video>

Atributul preload

Un alt atribut - preload este destinat gestionării încărcării videoclipului. Acesta acceptă următoarele valori:

auto: videoclipul și metadatele asociate vor fi încărcate înainte de a începe redarea
none: videoclipul nu va fi încărcat în fundal până când utilizatorul nu apasă butonul de redare
metadata: în fundal vor fi încărcate doar metadatele (date despre format, durată etc), videoclipul propriu-zis nu se încarcă

<video src="fox.mp4" width="400" height="300" controls preload="auto"></video>

Atributul poster

Atributul poster permite setarea unei imagini care va fi afișată înainte de începerea redării videoclipului. Acest atribut primește ca valoare calea către imagine:

<video src="fox.mp4" width="400" height="300" controls poster="mycat.jpg"></video>

Suportul formatelor video

Principala problemă la utilizarea elementului video este suportul diferitelor formate de către diverse browsere web. Cu ajutorul elementelor source incluse putem seta mai multe surse video, dintre care una va fi folosită:

<video width="400" height="300" controls>
<source src="fox.mp4" type="video/mp4">
<source src="fox.webm" type="video/webm">
<source src="fox.ogv" type="video/ogg">
</video>

Elementul source folosește două atribute pentru setarea sursei video:

src: calea către fișierul video
type: tipul video (tipul MIME)

Dacă browserul nu suportă primul tip de video, acesta încearcă să încarce al doilea fișier video. Dacă nici tipul celui de-al doilea fișier video nu este suportat, browserul trece la al treilea fișier video.