Pentru a ne putea aminti în scurt timp, iată un exemplu despre cum se încorporează tradițional videoclipurile într-un site web:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
O astfel de sintaxă este cu siguranță totul, mai puțin plăcută.
Dar chiar și dacă trecem cu vederea aspectul estetic: Sintaxa este pur și simplu prea predispusă și prea complexă în această formă. În HTML5, videoclipurile pot fi integrate mult mai ușor. Pentru asta se folosește elementul video.
Iată un exemplu de cum se poate integra acel element video:
<video src="video.ogv" width="300" height="200"> Din păcate, browser-ul dvs. nu este compatibil cu HTML5 </video>
Aceasta este cea mai simplă variantă în această formă. Trei atribute sunt cruciale în acest tip de sintaxă. Prin intermediul lui src este specificat videoclipul de încorporat. Fiți atenți la specificarea corectă a căii. Cele două atribute width și height determină lățimea și înălțimea videoclipului. Dacă nu sunt specificate ambele valori, videoclipul va fi afișat în dimensiunea sa originală. Dacă este specificată doar una dintre valorile, cealaltă valoare va fi calculată automat de browser. Atributul autoplay îi spune browser-ului să pornească videoclipul automat odată ce pagina a fost încărcată. De obicei, acest atribut nu ar trebui setat, deoarece redarea automată nu este de obicei dorită de utilizatori. Aceasta este valabilă mai ales pentru utilizatorii care folosesc dispozitive mobile cu o lățime de bandă redusă.
Un alt atribut interesant este controls. Dacă este folosit, browser-ul va afișa elemente native de control pentru redare și volum.
<video src="video.ogv" width="300" height="200" controls> Din păcate, browser-ul dvs. nu este compatibil cu HTML5 </video>
Aici este rezultatul în browser:
Prin bara afișată, videoclipul poate fi nu doar oprit și repornit, ci și controlul volumului este inclus în aceasta.
Puteți specifica o imagine prin atributul poster, care va fi afișată până la pornirea videoclipului. Pentru asta, se folosește atributul poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Din păcate, browser-ul dvs. nu este compatibil cu HTML5 </video>
Fiiți atenți și aici la specificarea corectă a căii, pentru ca imaginea să fie vizibilă într-adevăr.
Este necesară prudență în utilizarea atributului autoplay. Acest atribut specifică faptul că videoclipul trebuie să fie redat automat odată ce este disponibil.
<video src="video.ogv" width="300" height="200" autoplay> Din păcate, browser-ul dvs. nu este compatibil cu HTML5 </video>
Din punct de vedere al traficului, atributul preload poate fi interesant. Acest atribut controlează comportamentul de preîncărcare. Atributul poate avea următoarele valori:
• auto – Browser-ul poate preîncărca întregul fișier.
• niciun – Fișierul nu trebuie preîncărcat.
• metadata – Fișierul poate fi preîncărcat.
Dacă atributul de preîncărcare lipsește, se aplică setările implicite ale browser-ului.
Videoclipuri și codecuri
Cei care se ocupă de încorporarea și redarea videoclipurilor în paginile web, vor întâmpina mai devreme sau mai târziu problema cu diferitele codecuri. Datorită acestor codecuri, videoclipurile pot fi compresate și decompresate eficient. Problema este că producătorii de browsere nu au reușit până acum să cadă de acord asupra unui format de codec comun. Pentru HTML5 (și, în cele din urmă, pentru voi) aceasta înseamnă că nu există codecuri consistente pentru videoclipuri și fișiere audio.
Pentru videoclipuri, formatele Ogg și MP4 s-au impus în ultima vreme. Prin urmare, sunteți mereu în siguranță dacă oferiți videoclipul în aceste două formate. Pentru asta, atribuiți elementului video două elemente source.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Deci, nu specificați sursa video în cadrul elementului video. În schimb, acolo sunt făcute doar informații generale despre afișare. Ce video să fie afișat se determină printr-un element source. Atributul src primește video-ul corespunzător. După type urmează specificarea tipului de video sau a formatului în care se află video-ul.
Dacă sunt specificate mai multe elemente source, browser-ul va reda întotdeauna primul video care "se potrivește". Ce înseamnă acest "se potrivește" va fi descris în continuare.
Dar care browser suportă de fapt care format? Răspunsul la această întrebare este furnizat de următoarea tabelă.
| Browser | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | De la versiunea 9 | |
| Mozilla Firefox | Da | |
| Google Chrome | Da | Da |
| Opera | Da | |
| Safari | Da | |
| iPhone | Da | |
| Android | Da |
Tabelul evidentiază dilema: Interpretarea formatelor este distribuită aproape uniform pe fiecare browser. Prin urmare, este aproape obligatoriu să se specifice videoclipuri în ambele formate.
Prin atributul media, care trebuie atribuit exclusiv elementului source, puteți specifica explicit pentru ce tip de media este potrivit videoclipul. Pentru a specifica videoclipuri în mod special pentru anumite dispozitive finale, atribuiți atributul media lui src. Prin acest atribut media se specifică tipul de media dorit.
O posibilă utilizare a elementului source ar putea arăta astfel:
<video width="400" height="300">
<!-- Doar pentru dispozitive mobile -->
<source src="video_mobil.ogg" media="handheld" />
<!—Toate celelalte dispozitive -->
<source src="video_normal.ogg" media="all" />
</video>
Prin intermediul atributului media se verifică dacă este vorba despre un dispozitiv mobil. În acest caz, se redă un videoclip de dimensiuni mai mici. Dacă este vorba despre un alt dispozitiv, se folosește valoarea „all”.
Încorporarea sigură a videoclipurilor
Este cunoscut faptul că HTML5 încă nu este suportat de toate browserele. Acest lucru este valabil și pentru elementul video. O soluție este combinarea diferitelor tehnici de încorporare. Astfel, elementele cunoscute object și embed sunt combinate cu video. Acest lucru ar putea arăta astfel:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Videoclipurile încorporate în acest fel vor putea fi redare în cele mai multe browsere. Browserele care cunosc elementul video vor folosi acesta. Celelalte browsere se vor folosi însă de informațiile din elementul object sau, respectiv, din elementul embed.
