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">
	<param name="movie" value="http://www.youtube.com/v/F9Bo89m2f6g&hl=en&fs=1"></param>
	<param name="allowFullScreen" value="true"></param>
	
	<embed src="http://www.youtube.com/v/F9Bo89m2f6g&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>

Demo

Adevarul este ca ai dreptate, tot ce vezi e cam haotic, dar partea buna este ca nu trebuie sa il faci tu ci doar sa il copiezi de pe pagina youtube, si vei avea ca rezultat reprezentarea de mai sus, sau una asemanatoare in cazul in care alegi alt video. De?i în ultima vreme YouTube furnizeaz? un iFrame in locul codurilor de embed.

Voi mentiona insa ca scripturile de embed de pe pagina youtube nu sunt XHML 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.

BrowserMP4WebMOgg
Internet Explorer
Chrome
Firefox
Safari
Opera (Opera 25+)