Codul html | Rezultatul |
<a href="lume_minunata.mpeg">fişier video</a> | fişier video |
Pentru a insera o imagine video într-un document HTML se folosesc atributele dynsrc, controls, loop şi start ale tag-ului <img>
Atributul dynsrc înlocuieşte atributul src şi permite inserarea în documentul HTML a unei imagini video în acelaşi mod în care este inserată o imagine statică. Valoarea atributului dynsrc, este adresa URL a fişierului video care va fi inclus în pagină conform sintaxei:
<img dynsrc="URL_fisier_video">
Acest atribut este o extensie Internet Explorer şi nu este recunoscut de browserele Netscape. Pentru a vizualiza o imagine video in-line într-un browser Netscape, vizitatorul paginii trebuie să instaleze un program auxiliar de tip plug- in. Dacă programul plug-in nu este disponibil pe computerul vizitatorului, imaginea video nu va putea fi afişată.
Construcţia de mai jos include într-un document HTML fişierul video lume_minunata.mpeg:
<img dynsrc="lume_minunata.mpeg">
Efectul acestui tag este deschiderea de către browser a unei ferestre de vizualizare în interiorul paginii Web, fereastră în care va rula clipul video lume_minunata.mpeg.
Ca şi imaginile obişnuite, imaginea video este afişată pe măsură ce este încărcată.
Deoarece nici un alt browser în afară de Internet Explorer nu recunoaşte atributul dynsrc, este recomandată includerea în cadrul tag-ului <img> a atributului src prin care se furnizează o imagine statică ce va fi afişată în acelaşi cadru. Browserele care nu recunosc atributul dynsrc vor afişa imaginea statică, pe când Internet Explorer va afişa imaginea video. Ordinea în care apar cele două atribute nu are importanţă.
<img dynsrc="lume_minunata.mpeg" src="lume_minunata.mpeg">
În mod normal, Internet Explorer redă clipul video într-o fereastră în care nu sunt afişate nici un fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea clipului efectuând click dreapta cu mouse-ul în interiorul ferestrei. Pentru a adăuga butoane de control acestei ferestre se utilizează atributul controls al tag-ului <img>. Atributul controls nu are alocată nici o valoare, prezenţa sa având doar scopul de a adăuga butoanele de control asemănătoare celor de la aparatele video.
<img dynsrc="lume_minunata.mpeg" src="lume_minunata.mpeg" controls>
Clipul video inclus în pagină este redat de browser o singură dată, de la început până la sfârşit. Pentru a repeta redarea clipului de un anumit număr de ori este folosit atributul loop. Valorile posibile ale atributului sunt:
<img dynsrc="lume_minunata.mpeg" src="lume_minunata.mpeg" controls loop="infinite">
Redarea imaginii video începe imediat ce aceasta a fost complet încărcată în pagină. Pentru a schimba acest comportament se foloseşte atributul start care poate avea valorile:
Cele două valori pot fi combinate pentru a se realiza redarea imaginii mai întâi imediat după încărcarea în pagină şi apoi de fiecare dată când mouse-ul este plasat deasupra ei:
Imaginile videoin-line pot fi tratate ca şi imaginile statice. O astfel de imagine poate fi aliniată folosind atributul align, sau poate fi spaţiată faţă de textul care o înconjoară.
Codul html | Rezultatul |
<img dynsrc="lume_minunata.mpeg" src="lume_minunata.mpeg" controls loop="infinite" start="mouseover"> |
O altă modalitatea prin care pot fi vizionate videoclipurile direct din pagina Web este utilizarea tagul <embed>.
Forma generală a acestui element este <embed atribute>.
Acest tag nu are nevoie de un altul de închidere, funcţionează în mare masură la fel ca şi un tag de introducere a unei imagini.
Câteva exetnsii video suportate de tagul <embed>:
Cele mai folosite find .mpeg si .swf, datorita formatului compact.
Tagul <embed> are următoarele atribute:
Codul html | Rezultatul |
<embed src="lume_minunata.mpeg" hidden="true" loop="false" autostart="false" playcount="2" volume="50" height=60 width=144/> | Spre pagina video |
Partea buna este că nu trebuie să îl faci tu ci doar să îl copiezi de pe pagina youtube, şi vei avea ca rezultat reprezentarea de mai jos, sau una asemănătoare în cazul în care alegi alt video.
Codul html | Rezultatul |
<object width="425" height="344"> <param name="movie" value="http://www.youtube.com/e/v2B3tKIdyx4; </param> <param name="allowFullScreen" value="true"> </param> <param name="allowscriptaccess" value="always"> </param> <embed src="http://www.youtube.com/e/v2B3tKIdyx4" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"> </embed> </object> |
Voi menţiona însă că scripturile de embed de pe pagina youtube nu sunt XHML valid. Pentru a genera coduri valide XHML pentru filmuleţele de pe youtube vă recomand acest tool.
Valid XHTML embed code for YouTube videos
Trebuie doar să introduci url-ul unde ai găsit filmul şi vei obţine un cod valid XHTML.