Videoclipuri HTML5 10 lucruri pe care trebuie să le cunoască designerii

Revoluția HTML5 este un designer interesant din toate zonele globului. Noile specificații acceptă zeci de elemente și atribute pentru construirea site-urilor semantice. Aceste noi caracteristici includ etichete multimedia pentru formate audio și video.

În ultimii ani, un media player bazat pe Flash este mai mult decât suficient pentru streaming pe Web și această tehnologie este în continuare necesară pentru a sprijini browserele moștenite. Dar, din fericire, standardele moderne au avansat, iar includerea video HTML5 deschide ușile pentru zeci de noi oportunități.

În acest ghid aș dori să ofer o prezentare despre video HTML5 pentru Web. Va fi nevoie de o anumită practică pentru a înțelege playerul nativ în browser și toate funcționalitățile acestuia. Iar cel mai bun mod de a vă familiariza este scufundarea în cap!

1. Tipuri de materiale media

Când lucrați cu un player video flash, este prea frecvent să asociați toate formatele video în .flv. În timp ce acest lucru nu funcționează, cele mai multe fișiere FLV nu pot păstra calitatea oriunde în apropierea formatelor de fișiere / codec-uri mai avansate. Există 3 tipuri video importante care sunt acceptate de HTML5: MP4, WebM și Ogg / Ogv. Tipul de fișier MPEG-4 este, în general, codificat în H.264, care permite redarea în playere Flash de la terți. Acest lucru înseamnă că nu este necesar să păstrați o copie video FLV pentru a sprijini o metodă de rezervă! WebM și Ogg sunt două tipuri de fișiere mult mai noi, legate de video HTML5. Ogg utilizează codarea Theora care se bazează pe formatul standard de fișiere audio cu sursă deschisă. Acestea pot fi salvate cu extensia .ogg sau .ogv.

WebM este un proiect pus la dispoziție de Google pe care îl puteți citi mai mult pe site-ul web al proiectului WebM. Formatul este deja acceptat de Opera, Google Chrome, Firefox 4+ și, cel mai recent, de Internet Explorer 9. Este încă necunoscut de majoritatea profesioniștilor din domeniul web, însă WebM este cel mai important format media video în viitorul videoclipului web.

2. Suport pentru browser

Deci, care dintre aceste tipuri de fișiere aveți nevoie pentru site-ul dvs.? În mod ideal, toate cele 3 ar fi minunate, deoarece oferă spectrul complet de asistență. Cu toate acestea, acest lucru nu este realist și, de fapt, puteți acoperi toate bazele doar cu două. Iată o descriere a ceea ce funcționează pentru fiecare browser:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Fără HTML5, doar Flash!

Dacă vă aduceți aminte, mai devreme am menționat că cei mai mulți jucători flash vor sprijini fișierele MP4 atâta timp cât sunt codificate în H.264. Ca atare, fiecare dintre aceste browsere va încorpora MP4 + Flash ca destinație finală. Aceasta înseamnă că trebuie doar să creați Două diferite formate video pentru a suporta toate browserele. MP4 pentru Safari / IE9 și o alegere între WebM sau Ogg pentru restul.

În opinia mea, recomandăm să lipiți cu formatul WebM. Are nume mari în spatele proiectului (și anume Google) și a câștigat multă tracțiune în comunitatea HTML5. Ogg / Ogv va fi suportat, dar cel mai probabil va pierde în popularitate dimensiunile reduse ale fișierelor WebM. Puteți citi o piesă relevantă despre viitorul videoclipului pe web scris de Sean Golliher.

3. Embedding Video simplu HTML5

Să aruncăm o privire la sintaxa necesară pentru a încorpora un exemplu de cod. Tot ce avem nevoie este eticheta video HTML5 pentru a face referire la fiecare URL de film.

Observați controale și Redare automata atributele nu trebuie să fie setate cu valori. Am inclus, de asemenea, a poster atribut care preîncărcă o imagine pe playerul video înainte de streaming. Aceasta este o previzualizare comună cu mulți jucători web.

Oferim formate MP4 și WebM interne pentru elementul video. Dacă niciuna dintre acestea nu poate fi încărcată, atunci afișăm o eroare pentru utilizatorul să actualizeze browserul.

4. Oferirea unui Flash Fallback

Exemplul de mai sus este perfect pentru toate browserele web compatibile cu standardele. Cu toate acestea, trebuie să luăm în considerare faptul că lumea nu este întotdeauna la vârful tehnologiei. Trebuie să sprijinim utilizatorii în versiunile mai vechi de Safari, Mozilla Firefox și mai ales Internet Explorer.

Cea mai bună modalitate de a realiza acest lucru este printr-un jucător Flash Backback. Acestea pot fi adăugate utilizând încorporare sau obiect pentru a face referire la un fișier .swf al unei terțe părți. JW Player și Flowplayer sunt două soluții gratuite open source pe care le puteți lua în considerare. Dar, de asemenea, verificați jucători video premium pe ActiveDen, care pot merge la fel de ieftin ca $ 15 - $ 20.

Acum, haideți să tweak codul de mai sus pentru a include un player Flash Flash pentru a sprijini aproape fiecare browser în existență.

5. Suport pentru dispozitive mobile

Acest subiect este încă dezbătut, deoarece industria de telefonie mobilă este atât de tânără. Apple a venit cu suport pentru MP4 pe dispozitive Mac și iOS. Aceasta înseamnă că puteți să încărcați fișiere video .mp4 pe iPad, iPhone sau iPod Touch în interfața video standard. Aceasta acoperă o mare parte din cota de piață.

Dispozitivele Android recent au avut dificultăți în a ajunge la același nivel de suport. Cu toate acestea, Google a adoptat în cele din urmă .mp4 streaming web care acum valorifică aproape toți utilizatorii de telefonie mobilă. Și deoarece Flash nu este o opțiune aici MP4 este cea mai bună soluție disponibilă. De aceea, doriți să încorporați mai întâi codul .mp4 astfel încât dispozitivele iOS să poată recunoaște imediat fișierul.

6. Agent de utilizator Safari

Unul dintre bug-urile care trebuie mentionate este unul care exista intre jucatorii flash si stream-ul HTML5 .mp4 nativ pe Safari. Din moment ce browserul poate suporta ambele fișiere, este posibil să aveți probleme în a obține fluxul video HTML5 în locul Flash. Cu toate acestea, datorită acestei postări de blog de pe TUAW, este ușor să vă schimbați agentul de navigare.

Aceasta va obliga pagina dvs. web să recunoască browserul ca pe un alt dispozitiv. Cel mai probabil ați alege iPad, care nu acceptă nici o redare Flash. Aceasta este singura problemă majoră pe care o puteți întâlni atunci când testați metode de redare MP4 native și flash.

7. Gestionați controalele jucătorului

Credeți-vă sau nu există și metode pe care le puteți utiliza pentru a manipula comenzile playerului video HTML5. Totul se poate face în JavaScript, trăgând dintr-un set de metode deschise. Există mult prea multe pentru a afișa aici, dar încercați să obțineți mai multe detalii prin intermediul documentelor media W3C docs.

Pentru a vă oferi o idee generală, blogul Opera dev a postat câteva tutoriale scurte, care sunt minunate pentru începători. Chiar dacă nu ați mai primit niciodată JavaScript sau jQuery înainte, este încă simplu să atingeți terenul care rulează cu acesta. Puteți apela anumite atribute ale suportului video, cum ar fi dezactivat sau ora curentă. Apoi puteți efectua acțiuni (diminuarea fundalului, a anunțurilor grafice) pe baza acestor criterii prin manipularea DOM în jQuery.

Același dezvoltator din articolul Opera oferă o demonstrație de lucru a playerului video scripted. Posibilitatea de a personaliza propriile controale UI este remarcabilă. Acesta merge doar pentru a arăta cât de puternic este videoclipul HTML5.

8. Conversia formatului video

Aceasta este o altă chestiune importantă care va confunda probabil mai puțini oameni cu experiență în tehnologie. Doar doriți să obțineți site-ul dvs. în sus și streaming și acum trebuie să se ocupe cu conversia video? Ei bine, nu este chiar atât de dificil.

Pentru a trata MP4, care este cea mai mare prioritate a dvs., puteți utiliza HandBrake, o soluție gratuită, open source care rulează pe toate cele 3 mari sisteme de operare. Acesta va suporta H.264 impreuna cu cateva codecuri care fac ca aceasta sa fie cea mai buna optiune pentru utilizatorii freebie. Dacă aveți bani pentru a scoate afară, trebuie să recomandăm convertorul Xilisoft care se află pe Mac App Store doar pentru o licență de 40 de dolari pe întreaga durată a vieții.

Se pare că ruta WebM face viața mult mai ușoară. Miro Video Converter este un instrument gratuit pentru Windows și OS X, care produce fișiere WebM de o calitate excelentă. Se poate face, de asemenea, codificarea Ogg Theora care iese cu o calitate destul de mare.

9. Construirea unui Player Web

Formatele video cu specificații HTML5 sunt încă noi pentru dezvoltatori. Există protocoale deschise care așteaptă doar să fie jucate pentru a permite comenzi personalizate, glisoare, pictograme de redare / pauză etc. Dacă vă simțiți îndrăzneț, consultați acest tutorial cu privire la modul de a crea propriul player HTML5 (publicat pe Splashnology).

Codul este un pic intens pentru noii veniți deoarece necesită o direcționare avansată a CSS și un pic de jQuery formală. Există și alte cadre pe care le puteți construi și care oferă deja un design personalizat pentru jucător. În mod similar, această prezentare slideshare reprezintă o introducere excelentă în construirea unui player video HTML5.

10. Biblioteca VideoJS

VideoJS este probabil soluția mea preferată pentru playerele video HTML5. Tot ce aveți nevoie este că JavaScript-ul și foaia de stil CSS sunt găzduite de dvs. în altă parte. Apoi, scrieți codul video standard HTML5 cu câteva clase suplimentare pentru jupuire. I-am adăugat exemplul de mai jos:

Dacă se întâmplă să rulați un blog WordPress, puteți încerca și pluginul WP personalizat. Acesta va include automat biblioteca js / css în paginile în care afișați un videoclip HTML5. Și puteți face acest lucru din orice post sau editor de pagini folosind coduri scurte (a se vedea aici).

Concluzie

Sper că acest ghid introductiv vă poate agita interesul în viitorul videoclipului web. Cu mai mulți utilizatori care se îndreaptă către mobil, este important ca standardele HTML5 să fie adoptate pentru aceste tipuri de medii. Web-ul ar trebui să fie simplificat, astfel încât dezvoltatorii să poată produce soluții pe deplin suportate mult mai rapid. Ne-ar plăcea să auzim ideile și sugestiile dvs. pentru viitorul videoclipului HTML5. Dacă doriți să partajați, nu ezitați să lăsați un comentariu în zona de discuții post mai jos.