Tutorial HTML - Video

Un fisier video se poate insera intr-o pagina html de doua moduri. Prima modalitate ar fi cu ajutorul tagului <embed/>. Acest tag nu are nevoie de un altul de inchidere, functioneaza in mare masura la fel ca si un tag de introducere a unei fotografii.

html<embed src="example.mpeg" autostart="false" HEIGHT=60 WIDTH=144/>

Extensi video suportate de tagul embed

Acestea sunt dupa cum urmeaza:

• .swf - creat de Macromedia Flash
• .wmv - Microsoft Windows Media Video
• .mov - Quick Time Movie, apartine Apple
• .mpeg files - creat de Moving Pictures Expert Group.

Cele mai folosite find .mpeg si .swf, datorita formaului compact.

Atribute ale tagului embed

• autostart - stabileste daca fisierul va rula imediat dupa incarcarea paginii. Poate avea valoarea true sau false.
• hidden - stabileste daca butoanele sunt sau nu ascunse. Poate avea valoarea true sau false.
• volume - poate avea orice valoare intre 0 si 100
• loop - stabileste daca fisierul va fi reprodus in cerc sau nu. Poate avea valoarea true sau false.
• playcount- acesta stabileste de cate ori va fi reprodus fisierul. Spre exemplu playcount="2" (va fi reprodus de doua ori dupa care se va opri).

Introducerea unui video de pe YouTube folosind tag-ul embed

Acest lucru se face foarte simplu, youtube avand pe pagina fiecarui video codul HTML corespunzator.

html<object width="425" height="344" data="https://www.youtube.com/embed/F9Bo89m2f6g"></object>

html<embed src="https://www.youtube.com/embed/F9Bo89m2f6g" allowfullscreen="true" width="425" height="344">

html<iframe  width="425" height="344" src="https://www.youtube.com/embed/F9Bo89m2f6g" frameborder="0" allowfullscreen></iframe>

Dupa cum poti observa , acest iframe are o lungime si latime fixa si nu va fi responsive. Pentru al face responsive trebuie sa il pui intr-un copntainer dupa cum urmeaza.

html<div style="position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;">
	<iframe  width="425" height="344" src="https://www.youtube.com/embed/F9Bo89m2f6g" frameborder="0" allowfullscreen 
			style="position:absolute; top:0; left:0; width:100%; height:100%;">
	</iframe>
</div>

Demo

Daca vrei poti sa scoti folosesti o clasa pentru a adauga toate aceste proprietati CSS sau poti folosii JavaScript pentru a obtine un marckup mai curat. Dar toate acestea nu intra in tema acestui tutorial.

Voi mentiona insa ca scripturile de embed de pe pagina youtube nu sunt XHTML valid. Pentru a genera coduri valide XHML pentru filmuletele de pe youtube va recomand acest tool, ce genereaza cod embed, valid XHTML, pentru YouTube. Trebuie doar sa introduci url-ul unde ai gasit filmul si vei obtine un cod valid XHTML.

HTML5 video tag

Odata cu introducerea HTML5, tagul video s-a raspandit foarte repede si este suportat destul bine de browserele actuale. Tagul video, este folosit pentru a adauga un film in pagina html. In momentul de fata tagul video, suporta 3 tipuri de fisiere video:

• mp4 - MIME-type video/mp4
• webm - MIME-type video/webm
• ogg - MIME-type video/ogg

html<video width="320" height="240" controls>
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.mp4" type="video/mp4">
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Demo

In momentul de fata tagul video este suportat destul de bine de principalele browsere moderne.

• Tutorial HTML - Muzica
• Tutorial HTML - Body