Principal Smartphone-Uri Adăugarea de videoclipuri la site-ul dvs. web cu HTML5

Adăugarea de videoclipuri la site-ul dvs. web cu HTML5



Î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

none

none

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 OGGH.264 (mp4)
Firefox 3.5+X
Chrome 3+
Safari 3+X
Opera 10.5+X
Internet Explorer 8XX
Internet Explorer 9X
iPhoneX
AndroidX

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:

AtributDescriere
srco adresă URL validă către fișierul video în sine
Redare automataun boolean care indică dacă videoclipul trebuie redat automat
controaleun 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ărcareindică browserului dacă este necesară descărcarea preventivă a videoclipului sau dacă sunt necesare doar metadate.
Valorile posibile sunt:

  • none - indică faptul că videoclipul nu trebuie preîncărcat (deoarece probabil nu va fi necesar)
  • metadate - videoclipul probabil nu va fi necesar, dar este de dorit să fie metadate (de ex. dimensiuni, durată)
  • auto - informează browserul să încerce să descarce întregul videoclip
  • (șir gol) - înseamnă la fel ca auto
posteradresa URL a unui fișier imagine care să fie afișat atunci când nu sunt disponibile date video
lăţimelăț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:

AtributDescriere
srco adresă URL validă către fișierul media (în acest caz video)
tiptipul fișierului media care trebuie să fie Tip MIME , de exemplu. indică faptul că este un videoclip Theora OGG și puteți furniza și codecul MIME pentru a ajuta browserul să decidă cum să redea videoclipul utilizând type='video/ogg'.
jumătateoferă 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.

Articole Interesante

Alegerea Editorului

none
Cum se schimbă acțiunea de oprire implicită în Windows 8.1 și Windows 8
Windows 8 a făcut mai greoaie pentru utilizatorii de PC să oprească computerul prin creșterea numărului de clicuri necesare cu mouse-ul și tastatura. Există de fapt o duzină de modalități de închidere, astfel încât să puteți utiliza orice metodă doriți. Unul dintre ele este dialogul clasic Shutdown care apare când apăsați Alt + F4
none
Quinto Black CT 2.6 pentru Winamp cu remedieri și îmbunătățiri
Winamp este unul dintre cele mai populare playere media disponibile pentru Windows. Una dintre skinurile mele preferate pentru Winamp, „Quinto Black CT” versiunea 2.5 este acum disponibilă.
none
Cum să descărcați toate fotografiile dvs. de pe Facebook
Descărcați toate fotografiile de pe Facebook din contul dvs. înainte de a vă șterge definitiv contul. Iată cum să o faci.
none
Ștergeți memoria cache și cookie-urile din Microsoft Edge
Dacă unele pagini web au un comportament neașteptat, puteți încerca să ștergeți memoria cache și cookie-urile din Microsoft Edge în Windows 10. Iată cum.
none
Cum se creează tonuri de apel pentru iPhone?
Primul iPhone a fost lansat în 2007. Cu toate acestea, Apple nu ne-a oferit încă o modalitate rapidă de a utiliza un fișier audio ca ton de apel. În apărarea lor, metodele disponibile sunt destul de simple și obțin rezultatul dorit.
none
Cum să vă schimbați canalul wireless pe un TP-Link AC1750
Deși tehnologia wireless a făcut pași uriași în ultimele decenii, este posibil să întâmpinați încetiniri și chiar scăderi ale conexiunii. Sigur, una dintre modalitățile de a face față acestui lucru este de a obține o conexiune mai rapidă de la
none
Mac Handoff nu funcționează - Iată cum se remediază
Începerea unui proiect pe iPad și continuarea pe Mac este un lucru minunat - atunci când funcționează. Dacă aveți probleme cu Handoff care nu funcționează așa cum ar trebui, nu vă faceți griji, vă putem ajuta. Acest articol se concentrează