Includerea fișierelor video în paginile web

Abundența de materiale audio și video de pe internet a crescut în timp, pe măsură ce lățimea de bandă s-a îmbunătățit și spațiul de stocare a devenit mai ieftin și omniprezent. În acest timp, au fost prezentate multe abordări pentru a facilita utilizarea online a acestora. Software, extensii de fișiere, suplimente de browser și multe altele au încercat să umple golul. Acum, HTML5 a adăugat etichete audio și video pentru a facilita integrarea media în paginile noastre. Aceste etichete facilitează încorporarea media, dar (până în prezent) sunt limitate în numărul de formate de fișiere acceptate.

Notă: Puteți converti fișierele video în OGG cu orice software compatibil, așa cum ați converti în orice alt format video.

Noua noastră etichetă video acceptă o serie de funcții prin atribute precum redarea automată (autoplay), trecerea în buclă a fișierului (looping), comenzile de pe ecran (controls), preîncărcarea video înainte de a fi redat (preload), gestionarea erorilor (onerror) și chiar și afișarea unei imagini când fișierul nu este utilizat (poster) și include, de asemenea, lățimea, înălțimea și atributele sursă ale fișierului.

Fișierele video pe care dorim să le folosim trebuie să fie în formatul OGG, care este un format video open source. Ne definim videoclipul în mod similar cu alte elemente pe care le luăm în pagina noastră.

Un videoclip inițial care se redă pur și simplu când pagina este încărcată poate fi completat adăugând următoarele:

<video src="ourfile.ogg" width="200" height="150" autoplay>

Rețineți că aceasta este o soluție destul de nepoliticoasă în multe cazuri, deoarece fișierul va începe să fie redat de îndată ce este gata suficient, iar utilizatorul nu are niciun mijloc de control, cu excepția închiderii în întregime a paginii (gândiți-vă la reclamele minunate la care toți am fost supuși utilizării acestui tip de tehnică). Pentru a rezolva acest lucru, vom adăuga câteva atribute:

<video src="ourfile.ogg" width="200" height="150" autoplay controls preload=
"auto" poster="videoImage.png"> "auto" poster="videoImage.png">

Acum vedem un ecran de introducere și controale. Celelalte opțiuni ale noastre pentru preîncărcare (auto lasă browserul să decidă) sunt niciuna (none) și metada. None nu va opri toată activitatea de preîncărcare, în timp ce metadatele încarcă informații despre videoclip, cum ar fi lungimea și dimensiunile. Fișierele audio sunt de fapt identice cu această abordare (chiar și utilizarea fișierelor .ogg), cu excepția capacității de a defini lățimea și înălțimea. Tot ce trebuie să ne schimbăm este vocabularul, folosind cuvântul audio în loc de video din eticheta noastră.

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu