Tutorial HTML

• Notiuni introductive
• Notiuni de baza
• Comentarii
• Formatare text
• Liste
• Legaturi
• Imagini
• Sunete
• Videoclipuri
• Tabele
• Cadre
• Formulare
• Harti de imagini
• HTML si CSS
• Verificarea paginii

Videoclipuri

În paginile HTML putem introduce:

1. link-uri către fişiere video
2. videoclipuri care care să fie vizionate direct din pagina Web

Link-uri către fişiere video

Exemplu

Videoclipuri care care să fie vizionate direct din pagina web

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">

Observaţie!

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ţă.

Exemplu

<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.

Exemplu

<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:

1. un număr întreg care reprezintă numărul de reluări ale clipului
2. infinite, caz în care clipul este redat până când utilizatorul stopează derularea sa apăsând butonul stop al ferestrei de vizualizare (în cazul când fereastra conţine butoanele de control) sau efectuează click dreapta cu mouse-ul în fereastra de vizualizare.

Exemplu

<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:

1. mouseover, situaţie în care derularea imaginii video începe în momentul când mouse-ul este plasat deasupra imaginii;
2. fileopen, valoarea predefinită, situaţie în care derularea imaginii începe imediat după încărcarea în pagină

Exemplu

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>.

Observaţie!

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>:

1. swf - creat de Macromedia Flashl
2. wmv - Microsoft Windows Media Video
3. mov - Quick Time Movie, apartine Apple
4. mpeg files - creat de Moving Pictures Expert Group.

Cele mai folosite find .mpeg si .swf, datorita formatului compact.

Tagul <embed> are următoarele atribute:

1. src - defineşte locaţia fişierului video
2. autostart - stabileşte dacă fişierul va rula imediat dupa încărcarea paginii. Poate avea valoarea true sau false.
3. hidden - stabileşte dacă butoanele sunt sau nu ascunse. Poate avea valoarea true sau false.
4. volume - poate avea orice valoare între 0 si 100
5. loop - stabileşte dacă fişierul va fi reprodus în cerc sau nu. Poate avea valoarea true sau false.
6. playcount - stabileşte de câte ori va fi reprodus fişierul. Spre exemplu playcount="2" (va fi reprodus de două ori după care se va opri).

Exemplu

Introducerea fisierelor video direct de pe YouTobe

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.

Exemplu

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.