Tutorial HTML - Video

» HTML » Tutoriale HTML - Inserarea de coduri pentru Video in HTML

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>

Demo

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>