Utilizarea HTML5 pentru a afișa videoclipuri în browserele actuale

Găzduirea propriului videoclip HTML 5 vs. Folosind YouTube

YouTube este un site minunat. Facilitează încorporarea videoclipului în pagini web rapid și, cu câteva excepții minore, este destul de uniformă în executarea videoclipurilor respective. Dacă postezi un videoclip pe YouTube, poți fi destul de încrezător că oricine îl va putea viziona.

Dar utilizarea YouTube pentru a vă încorpora videoclipurile are unele dezavantaje

Majoritatea problemelor cu YouTube sunt pe partea consumatorului, mai degrabă decât pe cea a designerului, lucruri precum:

• Căutare și indexare lentă
• Intreruperi ale serverului
• Conținutul fiind eliminat (aparent) în mod arbitrar
• Prea mult conținut rău

Dar există câteva motive pentru care YouTube este rău și pentru dezvoltatorii de conținut, inclusiv:

• Durată maximă de 10 minute pentru videoclipuri (pentru conturi gratuite)
• Performanță slabă la încărcare
• YouTube câștigă drepturi de utilizare nelimitate asupra videoclipului tău
• Orice utilizator YouTube câștigă drepturi de utilizare nelimitate asupra videoclipului dvs.

Videoclipul HTML5 oferă câteva avantaje față de YouTube

Folosind HTML5 pentru video vă permite să controlați fiecare aspect al videoclipului dvs., de la cine îl poate vizualiza, cât de lung este, ce conține conținutul, unde este găzduit și cum funcționează serverul. Și HTML5 vă oferă posibilitatea de a vă codifica videoclipul în câte formate aveți nevoie pentru a vă asigura că numărul maxim de persoane îl poate viziona. Clienții dvs. nu au nevoie de un plugin sau să aștepte până când YouTube lansează o versiune mai nouă.

Desigur, videoclipul HTML5 oferă unele dezavantaje

Acestea includ:

• Trebuie să vă codificați videoclipul în cel puțin trei codecuri diferite.
• Trebuie să includeți unele JavaScript pentru a vă asigura că browserele nu acceptă HTML5 va functiona.
• Serverul dvs. trebuie să poată gestiona cerințele de lățime de bandă pentru găzduirea videoclipurilor.

Prezentare rapidă a asistenței video pe web

Adăugarea de videoclipuri la paginile web a fost mult timp un proces dificil. Au fost atât de multe lucruri care ar putea merge prost:

• În primul rând, utilizați eticheta pentru a încorpora videoclipul dvs. în pagina dvs. DAR acea etichetă este învechită în favoarea altei etichete. Și unele browsere nu l-au acceptat niciodată bine.
• Deci treci la eticheta, dar browserele mai vechi nu o acceptă, iar browserele mai noi sunt incomplete.
• Atunci te gândești Flash! Și codificați-vă videoclipul ca fișier FLV. Dar Flash nu mai este acceptat pe dispozitivele Windows.
• Deci, decideți să încărcați videoclipul pe un site de încorporare a videoclipurilor, cum ar fi YouTube, dar apoi aveți problemele cu YouTube pe care le-am discutat.
• În cele din urmă, decideți să mergeți cu HTML5, dar Internet Explorer nu îl acceptă (nu până la Internet Explorer 9). Și chiar dacă o faceți, există două standarde de codec video acceptate și un singur browser care le poate utiliza pe ambele.

Deci, ce ar trebui să faci? Renunțarea la videoclip nu mai este o opțiune pentru majoritatea site-urilor, deoarece videoclipul devine din ce în ce mai important. Și multe site-uri au trecut cu succes la video.

Următoarele pagini ale acestui articol vă vor ajuta să adăugați un videoclip la paginile dvs. web care funcționează în Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 și 4, iPhone și Android și Internet Explorer 7 și 8. De asemenea, veți avea cheile de care aveți nevoie pentru a adăuga suport pentru alte browsere mai vechi, dacă este necesar.

Creați și editați videoclipul dvs.

Primul lucru de care aveți nevoie atunci când veți pune un videoclip pe o pagină Web este videoclipul propriu-zis. Puteți să fotografiați continuu și să editați ulterior pentru a crea o caracteristică, sau puteți să o creați și să o planificați din timp. Oricum ar funcționa bine, este exact ceea ce vă simțiți confortabil. Dacă nu știți ce tip de videoclip ar trebui să faceți, consultați aceste idei din Ghidul video pentru desktop:

• Proiecte video de familie
• Video și videoclipuri promoționale
• Tururi virtuale video
• Cum să videoclipuri
• Videoclipuri de nuntă

Aflați cum să înregistrați videoclipuri de înaltă calitate

Asigurați-vă că știți cum să înregistrați în interior și în aer liber, precum și cum să înregistrați sunet. Iluminarea este, de asemenea, foarte importantă - fotografiile prea strălucitoare rănesc ochii și prea întunecate par doar noroioase și neprofesionale. Chiar dacă intenționați să aveți doar un videoclip de 30 de secunde pe site-ul dvs., cu cât este mai bună calitate, cu atât se va reflecta mai bine pe site-ul dvs. web.

Amintiți-vă, de asemenea, că drepturile de autor se aplică oricărui sunet sau muzică (precum și înregistrări video) pe care ați putea dori să le utilizați în videoclip. Dacă nu aveți acces la un prieten care poate scrie și reda o melodie pentru dvs., va trebui să găsiți muzică fără redevențe să se joace în fundal. Există, de asemenea, locuri pe care le puteți înregistra pentru a le adăuga videoclipurilor dvs.

Editarea videoclipului dvs.

Nu contează ce software de editare folosiți, atâta timp cât sunteți familiarizați cu el și îl puteți folosi eficient. Gretchen, Ghidul video pentru desktop, are câteva sfaturi profesionale de editare video care vă pot ajuta să vă editați videoclipurile, astfel încât acestea să arate grozav.

Salvați-vă videoclipul pe un MOV sau AVI (sau MPG, CD, DV)

Pentru restul acestui tutorial, vom presupune că aveți videoclipul salvat într-un tip de format de înaltă calitate (necomprimat), cum ar fi AVI sau MOV. Deși puteți utiliza aceste fișiere așa cum sunt, întâmpinați toate problemele cu videoclipul despre care am discutat deja. Următoarele pagini explică cum să convertiți fișierul în trei tipuri, astfel încât să poată fi vizualizat de cel mai mare număr de browsere.

Convertiți videoclipul în Ogg pentru Firefox

Primul format pe care îl vom converti este Ogg (uneori numit Ogg-Theora). Acest format este unul pe care Firefox 3.5, Opera 10.5 și Chrome 3 îl pot vedea.

Din păcate, în timp ce Ogg are suport pentru browser, multe dintre programele video bine cunoscute pe care le puteți cumpăra (Adobe Media Encoder, QuickTime etc.) nu oferă o opțiune de conversie Ogg. Deci, singura modalitate de a vă converti videoclipul în Ogg este să găsiți un program de conversie pe web.

Opțiuni de conversie

Există un instrument online numit Media-Convert care pretinde că convertește diferite formate de video (și audio) în alte formate video (și audio). Când am încercat-o cu videoclipul meu de testare de 3 secunde, nu am reușit să funcționeze pe Mac-ul meu. Dar s-ar putea să ai mai mult noroc. Acest site are avantajul de a fi gratuit.

Alte instrumente pe care le-am găsit includ:

• Miro Video Converter (Windows Macintosh): Acest program are avantajul de a converti atât la Ogg cât și la MP4 (H.264) și este open-source.
• Convertor video gratuit: Credem că acesta are atât o versiune pentru Windows, cât și o versiune Macintosh, dar a fost greu de spus de pe site-ul lor
• Codificator simplu Theora (Macintosh): Acesta este cel pe care tindem să-l folosim.

După ce ați salvat videoclipul în format Ogg, salvați-l într-o locație de pe site-ul dvs. web și accesați pagina următoare pentru a-l converti în alte formate pentru alte browsere.

Convertiți videoclipul în MP4 pentru Safari și Internet Explorer

Următorul format în care ar trebui să vă convertiți videoclipul este MP4 (video H.264), astfel încât să poată fi redat pe Internet Explorer 9 și versiuni ulterioare, Safari 3 și 4 și iPhone și Android.

Acest format este mai ușor disponibil în produsele comerciale și probabil că aveți deja un program care se convertește în MP4 dacă aveți un editor video. Daca ai Adobe Premiere puteți utiliza codificatorul video Adobe sau dacă aveți QuickTime Pro care funcționează și el. Mulți dintre convertoarele pe care le-am discutat în pagina anterioară convertesc și videoclipuri în MP4.

• MediaConvert: Un instrument AWS online.
• Miro Video Converter (Windows Macintosh): Acest program are avantajul de a converti atât la Ogg cât și la MP4 (H.264) și este open-source.
• SUPER (Windows): va converti multe tipuri de fișiere diferite în MP4
• Convertor video gratuit: Credem că acesta are atât o versiune pentru Windows, cât și o versiune Macintosh, dar a fost greu de spus de pe site-ul lor.

Adăugați elementul video la pagina dvs. web

1. Creați pagina dvs. Web așa cum ați crea-o în mod normal:

2. În interiorul corpului, așezați
3. Decideți ce atribute doriți să aibă videoclipul dvs. Vă recomandăm să folosiți controale și să încărcați. Utilizați opțiunea poster dacă videoclipul dvs. nu are o primă scenă bună.
   redare automată - pentru a începe imediat ce este descărcat
4. controale - permiteți cititorilor să controleze videoclipul (pauză, derulare înapoi, avansare rapidă)
5. buclă - porniți videoclipul de la început când se termină
6. preîncărcare - pre-descărcați videoclipul, astfel încât să fie gata mai repede atunci când clientul face clic pe el
7. poster - definiți imaginea pe care doriți să o utilizați când videoclipul este oprit
8. Apoi adăugați fișierele sursă pentru cele două versiuni ale videoclipului dvs. (MP4 și OGG) în interiorul
9. Deschideți pagina în Chrome 1, Firefox 3.5, Opera 10 și / sau Safari 4 și asigurați-vă că se afișează corect. Ar trebui să-l testați cel puțin în Firefox 3.5 și Safari 4 - deoarece fiecare folosește un codec diferit.

Asta este. Odată ce ați instalat acest cod, veți avea un videoclip care funcționează în Firefox 3.5, Safari 4, Opera 10 și Chrome 1. Dar ce zici de Internet Explorer?

Este foarte ușor să utilizați HTML 5 pentru a adăuga un videoclip la paginile web. Majoritatea browserelor moderne acceptă videoclipuri HTML 5, deși nu le acceptă toate în același mod. Ceea ce înseamnă acest lucru este că, dacă salvați videoclipul atât în ​​format Ogg, cât și în format MP4, puteți scrie doar patru sau cinci linii de HTML pentru a-l afișa în majoritatea browserelor moderne (cu excepția Internet Explorer 8). Iată cum:

Scrieți marcatorul HTML 5 doctype, astfel încât browserele să știe să se aștepte la HTML 5:

1. Creați pagina dvs. Web așa cum ați crea-o în mod normal:

2. În interiorul corpului, așezați
3. Decideți ce atribute doriți să aibă videoclipul dvs. Vă recomandăm să folosiți controale și să încărcați. Utilizați opțiunea poster dacă videoclipul dvs. nu are o primă scenă bună.
   redare automată - pentru a începe imediat ce este descărcat
4. controale - permiteți cititorilor să controleze videoclipul (pauză, derulare înapoi, avansare rapidă)
5. buclă - porniți videoclipul de la început când se termină
6. preîncărcare - pre-descărcați videoclipul, astfel încât să fie gata mai repede atunci când clientul face clic pe el
7. poster - definiți imaginea pe care doriți să o utilizați când videoclipul este oprit
8. Apoi adăugați fișierele sursă pentru cele două versiuni ale videoclipului dvs. (MP4 și OGG) în interiorul
9. Deschideți pagina în Chrome 1, Firefox 3.5, Opera 10 și / sau Safari 4 și asigurați-vă că se afișează corect. Ar trebui să-l testați cel puțin în Firefox 3.5 și Safari 4 deoarece fiecare folosește un codec diferit.

Asta este. După ce ați instalat acest cod, veți avea un videoclip care funcționează în Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ și Chrome 1.

Testați în cât mai multe browsere posibil

Pentru liniștea sufletească, ar trebui să testați și în browserele mai vechi pentru a vedea ce fac, mai ales dacă mulți dintre cititorii dvs. folosesc browsere mai vechi.

Testarea paginilor video este esențială dacă doriți să aveți o lansare reușită. Ar trebui să vă asigurați că vă testați pagina în cele mai populare browsere și versiuni pentru site-ul dvs. web.

Am constatat că, deși este posibil să folosiți instrumente precum BrowserLab și AnyBrowser pentru a testa videoclipuri, nu este la fel de fiabil ca afișarea paginii pe un browser. Când faceți acest lucru, puteți vedea cu adevărat dacă funcționează sau nu.

Din moment ce v-ați confruntat cu toate problemele pentru a vă codifica videoclipul în mai multe formate, ar trebui să-l testați pentru a vă asigura că este afișat în mai multe browsere. Aceasta înseamnă, cel puțin, că ar trebui să-l testați în Firefox, Safari și IE.

Pentru liniștea sufletească, ar trebui să testați și în browserele mai vechi pentru a vedea ce fac, mai ales dacă mulți dintre cititorii dvs. folosesc browsere mai vechi.

Funcționarea videoclipului în browserele mai vechi

La fel ca în cazul oricărei pagini web, ar trebui să luați în considerare mai întâi cât de important este ca aceste browsere să funcționeze. Dacă 90% dintre clienții dvs. utilizează Netscape, atunci ar trebui să aveți un plan de rezervă pentru ei. Dar dacă mai puțin de 1% o fac, s-ar putea să nu mai conteze atât de mult.

După ce ați decis ce browsere veți încerca să acceptați, cel mai simplu mod este să creați pur și simplu o pagină alternativă pentru ca aceștia să vizualizeze videoclipul. Pe acea pagină alternativă, ați încorpora un videoclip folosind HTML 4. Apoi, fie folosiți o formă de detectare a browserului pentru a le redirecționa acolo, fie adăugați doar un link către pagina respectivă pe aceasta.