În primul său blog pentru PC Pro , dezvoltator web Ian Devlin vă arată cum să încorporați videoclipuri pe site-ul dvs. web cu HTML5
ce vezi când te blochează cineva pe facebook
Probabil cea mai mare și mai discutată caracteristică a HTML5 este videoclipul încorporat. În prezent, singura metodă de a adăuga conținut video pe site-ul dvs. web este cu un plugin terță parte, cum ar fi Flash, QuickTime sau RealPlayer. Odată cu începutul HTML5 și al elementului video, toate acestea se vor schimba, asistența video fiind gestionată de browserul web, eliminând necesitatea oricărui suport terț.
Mai multe browsere web oferă deja suport pentru HTML5. Aici vom dezvălui cum puteți încorpora videoclipuri fără plugin în site-ul dvs. și problemele cu care vă veți confrunta.
Tipuri de fișiere și compatibilitate cu browserul
Pentru început, vom analiza pe scurt diferitele tipuri de fișiere video care sunt acceptate în HTML5. Acestea sunt Theora OGG și H.264 (.mp4). Browsere diferite acceptă diferite tipuri, iar unele nu acceptă deloc. Următorul tabel indică acest lucru:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | X |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | X | ✓ |
| Opera 10.5+ | ✓ | X |
| Internet Explorer 8 | X | X |
| Internet Explorer 9 | X | ✓ |
| iPhone | X | ✓ |
| Android | X | ✓ |
Codecuri și alte probleme tehnice
HTML5 în sine nu specifică un codec video de utilizat și acest lucru a dus la argumente cu privire la care este cel mai bun de utilizat pentru web . Deci, pentru a acoperi toate browserele, trebuie să acceptăm ambele codecuri.
Și, desigur, există Internet Explorer. În acest moment, niciuna dintre versiunile lansate de Internet Explorer nu acceptă elementul video și este încă necesar un plugin pentru redarea videoclipului. Acest lucru se va schimba odată cu lansarea Internet Explorer 9 (probabil la începutul anului viitor), când va fi acceptat H.264, împreună cu multe alte bunătăți HTML5.
În cazul în care vă întrebați cum, puteți converti fișierele dvs. video în OGG (puteți citi mai multe despre tipul Theora OGG la TheoraCookbook ) fișiere folosind Miro Video Converter .
Pentru mai multe informații detaliate despre elementul video și codecuri, mergeți la scufundați-vă în html5: video pe web de Mark Pilgrim.
Cod HTML5
Acum trecem la codul HTML5 real și la modul în care putem face ca lucrul să funcționeze. HTML5 ne oferă două elemente noi pe care le putem folosi pentru a adăuga videoclipuri la paginile noastre web: element, pe care l-am menționat deja, și | | + _ | element. Să analizăm pe rând fiecare dintre acestea.
Elementul
Elementul video poate avea următoarele atribute:
| Atribut | Descriere |
|---|---|
| src | o adresă URL validă către fișierul video în sine |
| Redare automata | un boolean care indică dacă videoclipul trebuie redat automat |
| controale | un boolean care indică faptul că comenzile media implicite trebuie afișate de browser |
| buclă | un boolean care indică dacă videoclipul trebuie redat în mod repetat |
| preîncărcare | indică browserului dacă este necesară descărcarea preventivă a videoclipului sau dacă sunt necesare doar metadate. Valorile posibile sunt:
|
| poster | adresa URL a unui fișier imagine care să fie afișat atunci când nu sunt disponibile date video |
| lăţime | lățimea videoclipului, în pixeli CSS |
| înălţime | înălțimea videoclipului, în pixeli CSS |
Din aceasta, se poate vedea cât de ușor este să încorporați un videoclip OGG în site-ul dvs. web folosind singur elementul video:
Asta este cu adevărat tot ce există.
Orice browser care acceptă formatul Theora OGG ar trebui să afișeze și să redea cu succes videoclipul dvs. fără alte întrebări. Desigur, nu este la fel de ușor ca asta, deoarece așa cum am văzut din tabelul de mai sus, codul ar funcționa numai în Firefox, Chrome și Opera. Deci, trebuie să avem și o rezervă la H.264. Acest lucru poate fi realizat folosind element, care ne permite să definim mai multe surse media pentru elementul video.
pot schimba hei google cu altceva
Elementul
Elementul sursă are următoarele atribute:
| Atribut | Descriere |
|---|---|
| src | o adresă URL validă către fișierul media (în acest caz video) |
| tip | tipul fișierului media care trebuie să fie Tip MIME , de exemplu. type='video/ogg'. |
| jumătate | oferă tipul media dorit al resursei media și trebuie să fie valid interogare media , de exemplu. type='video/ogg; codecs='theora, vorbis' indică faptul că videoclipul este potrivit pentru dispozitive portabile sau media='handheld' ceea ce indică faptul că videoclipul este potrivit pentru ecrane de 720 pixeli sau mai mult. |
Notă: elementul sursă este nul și are o etichetă de pornire, dar nu are o etichetă de închidere
Cel mai util lucru despre elementul sursă este că îl putem folosi pentru a stiva diferitele tipuri de fișiere, permițând browserului să încerce fiecare pe rând până când găsește unul pe care îl poate reda.
Folosind și împreună
Pentru a stiva videoclipuri în diferite tipuri din elementul video, introducem codul după cum urmează:
media='all and (min-device-height:720px)'
Codul de mai sus va funcționa acum în toate browserele, cu excepția Internet Explorer, care va afișa mesajul indicat mai sus.
Puteți testa acest lucru singur vizionând pagina de testare HTML5, care conține un exemplu de videoclip al unui fluture atât în format Theora OGG, cât și în format MP4, deci dacă vizionați acest lucru în Firefox, Chrome, Safari, Opera sau pe iPhone sau un Receptor Android, ar trebui să îl puteți vizualiza.
Cuțitele ascuțite dintre voi vor observa acum că putem profita de această stivuire și putem avea o alternativă la Flash (sau la un alt plugin) în partea de jos, în loc să afișăm o scuze, nu puteți vedea acest mesaj video, utilizând următorul cod :
Your browser does not support the video element.
Concluzie
La fel ca în majoritatea elementelor HTML5, suportul browserului pentru elementele sursă și video este în prezent neuniform. Există, de asemenea, o dezbatere amplă în acest moment cu privire la faptul dacă elementul sursă va ucide utilizarea Flash ca cea mai populară metodă de a adăuga conținut video pe site-uri web. Nu sunt sigur că va ucide Flash complet, dar totuși cred că este corect să spunem că este aici pentru a rămâne și va oferi dezvoltatorilor web o abordare mai ușoară și mai curată pentru încorporarea videoclipurilor.
