Jump to content
Sign in to follow this  
I'm Infinite

Tutoriale HTML - Inserarea de coduri pentru Video in HTML

Recommended Posts

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 

https://youtu.be/F9Bo89m2f6g 

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.

Browser              MP4                   WebM          Oogg
Internet Explorer                                           
Chrome                                                      
Firefox                                                        
Safari                                                          
Opera      (Opera 25+)                                

Share this post


Link to post
Share on other sites
Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

Despre Noi


Suntem o comunitate cu domeniul NewMoon din 2018 dar cu o echipa Administrativă formată în anul 2012. Scopul nostru este să va readucem plăcerea de a va distra și de a întemeia noi prietenii.

Parteneri Oficiali


Comunitatea NewMoon


NewMoon logo
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.