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/>
Acestea sunt dupa cum urmeaza:
Cele mai folosite find .mpeg si .swf, datorita formaului compact.
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>
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.
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:
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>
In momentul de fata tagul video este suportat destul de bine de principalele browsere moderne.
Browser | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | |||
Chrome | |||
Firefox | |||
Safari | |||
Opera | (Opera 25+) |