Utilizarea HTML5 pentru afișarea videoclipurilor în browserele curente

Eticheta video HTML5 ușurează adăugarea de videoclipuri pe paginile Web. Dar, în timp ce apare ușor la suprafață, există multe lucruri pe care trebuie să le faceți pentru a vă face să funcționeze. Acest tutorial vă va ajuta să parcurgeți pașii pentru a crea o pagină în HTML5 care va rula video în toate browserele moderne.

• Găzduiți propriul dvs. videoclip HTML5 în comparație cu utilizarea YouTube
• Prezentare generală rapidă a asistenței video pe Web
• Creați și editați videoclipul
• Conversia video la Ogg pentru Firefox
• Conversia video la MP4 pentru Safari
• Conversia video la FLV pentru Internet Explorer
• Adăugați elementul video pe pagina Web
• Adăugați JavaScript și Flash Player pentru ca Internet Explorer să funcționeze
• Testați în cât mai multe browsere după cum puteți

01 din 10

Găzduiți propriul cod HTML 5 în comparație cu utilizarea YouTube

YouTube este un site minunat. Ea facilitează rapid încorporarea video în pagini Web și, cu câteva excepții minore, este destul de neîntreruptă în executarea acestor videoclipuri. Dacă postezi un videoclip pe YouTube, poți fi destul de sigur că oricine o va putea urmări.

Dar utilizarea YouTube pentru a încorpora videoclipurile dvs. are unele dezavantaje

Majoritatea problemelor legate de YouTube sunt pe partea consumatorilor, mai degrabă decât pe partea de designer, lucruri precum:

• Căutarea și indexarea lentă
• Blocarea serverului
• Conținutul a fost eliminat (aparent) arbitrar
• Prea mult conținut rău

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

• Durată maximă de 10 minute pentru videoclipuri (pentru conturile gratuite)
• Performanță slabă de încărcare
• YouTube câștigă drepturi nelimitate de utilizare a videoclipului dvs.
• Orice utilizator YouTube obține drepturi nelimitate de utilizare a videoclipului dvs.

Video HTML5 oferă câteva avantaje pe YouTube

Folosirea codului HTML5 pentru video vă va permite să controlați fiecare aspect al videoclipului dvs., de la cine îl poate vedea, cât timp este, conținutul conținutului, locul în care este găzduit și cum efectuează serverul. Și videoclipul HTML5 vă oferă posibilitatea de a vă codifica videoclipul în cât mai multe formate, pentru a vă asigura că numărul maxim de persoane îl pot vedea. Clienții dvs. nu au nevoie de un plugin sau să aștepte până când YouTube va lansa o versiune mai nouă.

Desigur, video HTML5 oferă câteva dezavantaje

Acestea includ:

• Trebuie să codificați videoclipul în cel puțin trei codecuri diferite
• Trebuie să includeți un anumit JavaScript pentru a asigura că browserele care nu acceptă HTML5 vor funcționa
• Serverul dvs. trebuie să fie capabil să facă față cerințelor privind lățimea de bandă pentru găzduirea clipurilor video

Continuați să citiți mai jos

02 din 10

Prezentare generală rapidă a asistenței video pe Web

Adăugarea videoclipurilor pe 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 pentru a încorpora videoclipul în pagina dvs. DAR acea etichetă este depreciată în favoarea unei alte etichete. Și unele browsere nu au susținut-o bine oricum.
• Așa că treceți la , însă browserele mai vechi nu o acceptă, iar browserele mai noi sunt în sprijinul său.
• Atunci crezi că Flash! Și codificați videoclipul ca fișier FLV. Dar Flash nu este acceptat pe multe dispozitive mobile și mulți oameni urăsc Flash indiferent de modul în care este folosit (25% dintre respondenți din sondajul meu, care întreabă cum vă simțiți despre Flash au declarat că nu pot suporta Flash în nici un fel).
• Deci, decideți să încărcați videoclipul pe un site de încorporare a videoclipurilor, cum ar fi YouTube, dar apoi aveți problemele pe care le-am discutat cu YouTube.
• În cele din urmă, decideți să mergeți cu HTML5, dar Internet Explorer nu o acceptă (nu până la Internet Explorer 9). Și chiar dacă faceți asta, există două standarde de codec video care sunt acceptate și numai un singur browser care poate utiliza ambele. Suport pentru browser pentru codecuri video și contacte

Deci, ce ar trebui să faci? Găsirea pe video 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 videoclipuri pe paginile Web care funcționează în Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 și 4, iPhone și Android, Flash și Internet Explorer 7 și 8. aveți, de asemenea, cheile de care aveți nevoie pentru a adăuga suport pentru alte browsere mai vechi, dacă este necesar.

Continuați să citiți mai jos

03 din 10

Creați și editați videoclipul

Primul lucru de care aveți nevoie atunci când doriți să plasați un videoclip pe o pagină Web este videoclipul real. Puteți să trageți continuu și să editați ulterior pentru a crea o caracteristică, sau puteți să o scriu și să o planificați înainte. Oricum funcționează bine, este exact ceea ce vă convine. Dacă nu știți ce tip de videoclip ar trebui să faceți, consultați aceste idei din Ghidul video pentru desktop:

• Proiectele video de familie
• Marketing și promoționale
• Vizite virtuale video
• Cum să Video
• Videoclipuri de nunta

Aflați cum puteți înregistra video 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 audio. Lumina este, de asemenea, foarte importantă - fotografii care sunt prea luminoase rănit ochii, și prea întuneric arata pur și simplu noroios și neprofesional. Chiar dacă intenționați să aveți un videoclip de 30 de secunde pe site-ul dvs., cu atât calitatea superioară este cea mai bună pe care o va reflecta pe site-ul dvs. Web.

Amintiți-vă de asemenea că drepturile de autor se aplică oricărei sunete sau muzică (precum și imaginilor de stocare) pe care doriți să le utilizați în videoclipul dvs. Dacă nu aveți acces la un prieten care poate scrie și reda un cântec pentru dvs., va trebui să găsiți muzică fără drepturi de autor pentru a juca în fundal. Există, de asemenea, locuri pe care le puteți încărca imagini pentru a le adăuga la videoclipurile dvs.

Editarea videoclipului

Nu contează ce software de editare utilizați, atâta timp cât sunteți familiarizat cu acesta și îl puteți folosi eficient. Gretchen, ghidul video pentru desktop, conține câteva sfaturi profesionale de editare video care vă pot ajuta să editați videoclipurile astfel încât să arate minunate.

Salvați videoclipul dvs. într-un MOV sau AVI (sau MPG, CD, DV)

Pentru restul acestui tutorial, vom presupune că ați salvat videoclipul dvs. într-un format de înaltă calitate (non-comprimat), cum ar fi AVI sau MOV. În timp ce puteți utiliza aceste fișiere ca atare, întâmpinați toate problemele legate de videoclipul despre care am discutat deja. Următoarele pagini vor explica cum să convertiți fișierul în trei tipuri, astfel încât acesta să poată fi vizualizat de cel mai mare număr de browsere.

04 din 10

Conversia video la 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 le pot vizualiza toți.

Din păcate, în timp ce Ogg are suport pentru browser, multe dintre programele video 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 converti videoclipul în Ogg este să găsești 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 de testare de 3 secunde, nu am reușit să lucrăm cu Mac-ul meu. Dar poate ai mai mult noroc. Acest site are avantajul de a fi gratuit.

Unele 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 și MP4 (H.264) și este open source.
• Koyote Video Converter (Windows)
• Free Video Converter Credem că acest lucru are atât o versiune Windows cât și o versiune Macintosh, dar a fost greu de spus de pe site-ul lor
• Simplu Theora Encoder (Macintosh) - acesta este cel pe care îl folosim.

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

Continuați să citiți mai jos

05 din 10

Conversia video la MP4 pentru Safari

Următorul format pe care trebuie să-l convertiți este MP4 (video H.264), astfel încât să poată fi redat pe Safari 3 și 4 și iPhone și Android. În plus, videoclipurile H.264 pot fi ușor convertite în fișiere FLV pentru vizionarea pe Flash.

Acest format este mai ușor disponibil în produse comerciale și, probabil, aveți deja un program care va converti în MP4 dacă aveți un editor video. Dacă aveți Adobe Premiere puteți utiliza Adobe Video Encoder sau dacă aveți QuickTime Pro care va funcționa la fel. Multe dintre convertoarele pe care le-am discutat pe pagina anterioară vor converti, de asemenea, videoclipuri în MP4.

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

Salvați fișierul MP4 pe site-ul dvs. Web și apoi va trebui să îl convertiți în Flash pentru a utiliza Internet Explorer.

06 din 10

Conversia video la FLV pentru Internet Explorer

Cea mai ușoară modalitate de a converti videoclipuri în FLV este utilizarea Flash în sine. Așa convertim videoclipurile mele în Flash. Dar dacă nu aveți Flash, iată două instrumente populare pentru conversia fișierelor în FLV:

• SUPER (Windows) - va converti mai multe tipuri de fișiere în MP4 și FLV
• ffmpegX (Macintosh) - va converti mai multe tipuri de fișiere în Mp4 și FLV.

Salvați fișierul FLV pe site-ul dvs. web și următoarea pagină vă va arăta cum să scrieți codul HTML astfel încât să puteți reda videoclipurile.

Continuați să citiți mai jos

07 din 10

Adăugați elementul video pe pagina Web

Este foarte ușor să utilizați codul HTML 5 pentru a adăuga videoclipuri la paginile Web. Majoritatea browserelor moderne acceptă video HTML 5, deși nu o suportă în același mod. Dar ceea ce inseamna acest lucru este ca daca salvezi videoclipul ca ambele formate Ogg si MP4, vei putea scrie doar patru sau cinci linii HTML pentru a fi afisat in cele mai multe browsere moderne (cu exceptia Internet Explorer 8). Iată cum:

Scrieți markerul HTML 5 doctype astfel încât browserele știu să aștepte HTML 5:

1. Creați pagina Web așa cum o creați î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ă utilizați comenzile și să încărcați în prealabil. Utilizați opțiunea poster dacă videoclipul dvs. nu are o primă scenă bună.
   1. redare automată - pentru a începe imediat ce este descărcat
   2. controale - permite cititorilor dvs. să controleze videoclipul (pauză, derulare înapoi, rapid înainte)
   3. buclă - începeți videoclipul de la început când se termină
   4. preload - descărcați video înainte ca acesta să fie gata mai repede când clientul face clic pe el
   5. poster - definiți imaginea pe care doriți să o utilizați atunci când videoclipul este oprit
4. Apoi adăugați fișierele sursă pentru cele două versiuni ale videoclipului dvs. (MP4 și OGG) în interiorul
5. Deschideți pagina în Chrome 1, Firefox 3.5, Opera 10 și / sau Safari 4 și asigurați-vă că acesta este afișat corect. Ar trebui să îl testați în cel puțin Firefox 3.5 și Safari 4 - deoarece fiecare utilizează un alt codec.

Asta e. 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 cum rămâne cu Internet Explorer?

Internet Explorer nu-i place HTML 5 sau

În secțiunea următoare, vom vorbi despre ce puteți face pentru a obține IE 8 pentru a juca frumos cu etichetele dvs. video HTML 5 și pentru a afișa un videoclip. Trebuie să utilizați Flash.Vestea bună este că IE 9 este de așteptat să susțină HTML 5 și eticheta video.

08 din 10

Adăugați JavaScript și Flash Player pentru ca Internet Explorer să funcționeze

S-ar putea să fi observat că în HTML-ul paginii anterioare nu a existat nici o linie sursă pentru fișierul FLV. Și dacă ați testat acea pagină în Internet Explorer, nu ar funcționa. Acest lucru se datorează faptului că Internet Explorer nu recunoaște codul HTML 5 și nu poate să creeze niciun videoclip OGG sau MP4. Pentru ca Internet Explorer 7 și 8 să funcționeze, trebuie să aveți ca videoclip să redați Flash. Dar există mai mulți pași pentru a ajunge la lucru decât să adăugați fișierul FLV.

Pasul 1: Obțineți un Player Flash Flash pentru site-ul dvs. Web

Vă recomandăm să obțineți FlowPlayer, deoarece este un player video Flash cu sursă deschisă pe care îl puteți instala pe serverul dvs. Web și utilizați ori de câte ori aveți video Flash pentru redare. Versiunea gratuită a aplicației FlowPlayer inserează publicitate în videoclipurile dvs., dar puteți achiziționa și licențe comerciale dacă aveți nevoie de ele.

Urmați instrucțiunile de pe site-ul FlowPlayer pentru a instala FlowPlayer pe site-ul dvs. Web. Pe scurt, veți instala două fișiere SWF și un fișier JavaScript pe site-ul dvs. În partea de jos a codului HTML, (înainte de tag), veți adăuga o linie:

Însă Internet Explorer nu va reda videoclipul, trebuie să-l învățați cum să recunoască etichetele HTML 5.

Pasul 2: convinge Internet Explorer să citească etichete HTML 5

Există un script la îndemână pe Google Code numit "HTML Shiv", care va ajuta IE să recunoască HTML 5 elemente. Deci, în din documentul HTML pe care doriți să-l referiți. Cel mai bine este să-l închideți în comentariile condiționale IE, astfel încât celelalte browsere să nu fie confundate:

Bine, acum IE o va recunoaște

Pasul 3: Adăugați o linie sursă pentru fișierul FLV

La fel ca și în cazul paginii anterioare, veți adăuga o linie HTML 5 înăuntru

Continuați să citiți mai jos

09 din 10

Adăugați JavaScript și Flash Player pentru a obține Internet Explorer la locul de muncă - Partea 2

Din păcate, încă nu am terminat. Acum trebuie să îi spunem IE să folosească playerul video Flash FlowPlayer pe care l-am referit mai sus.

Pasul 4: Întoarceți

Pentru aceasta, avem nevoie de un alt scenariu. Am primit scenariul de la Dive Into HTML 5. Dar cand am testat-o, nu a functionat pana nu am facut cateva ajustari:

• În jurul liniei 31: adăugați locația instalării FlowPlayer.
• În jurul liniei 42: modificați tipul de fișier de la video / mp4 la video / x-flv
• În jurul liniei 94: începând cu dacă (!! $ && !! $ (document) .ready) {până la sfârșitul documentului, schimbați acea secțiune pentru a citi:

  // dacă (!! $ && !! $ (document) .ready) {/ * Utilizatorii jQuery pot inițializa imediat ce DOM-ul este gata * // / $ (document) .ready (html5_video_init);//} altceva {/ * Toată lumea poate aștepta până la încărcare * // * funcția addEvent prin http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /var addEvent = funcție (obj, tip, fn) {dacă (obj.addEventListener)obj.addEventListener (tip, fn, fals);altfel dacă (obj.attachEvent)obj.attachEvent (tipul "on" +, funcția () {return fn.apply (obj, nou Array (window.event));});}addEvent (fereastră, "încărcare", html5_video_init);//}

După ce ați editat fișierul JavaScript, încărcați-l pe serverul dvs. și conectați-l la partea de jos a paginii HTML (înainte de ):

Uau! Acum că ați făcut toate acestea, ar trebui să încărcați codul HTML pentru a putea începe testarea.

10 din 10

Testați în cât mai multe browsere după cum puteți

Testarea paginilor video este esențială dacă doriț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ă, în timp ce este posibil să utilizați instrumente precum BrowserLab și AnyBrowser pentru a testa videoclipul, nu este la fel de sigur ca aducerea paginii pe un browser. Când faci asta, poți vedea cu adevărat dacă funcționează sau nu.

De vreme ce ați făcut toate necazurile pentru a vă codifica videoclipul în trei formate, ar trebui să îl testați pentru a vă asigura că acesta este afișat în toate cele trei. Aceasta înseamnă, cel puțin, că trebuie să-l testați în:

• Firefox 3.5
• Safari 3 sau 4
• Internet Explorer 7 sau 8

Puteți testa în Chrome, dar din moment ce Chrome va vedea toate cele trei metode (chiar Flash, dacă aveți pluginul), este greu să afli dacă există o problemă cu unul dintre celelalte două sau cu ce codec utilizează Chrome.

Pentru liniștea ta, ar trebui să testezi și în browserele mai vechi pentru a vedea ce fac, mai ales dacă mulți cititori utilizează browsere mai vechi.

Obținerea unui videoclip care lucrează în browsere mai vechi

Ca și în cazul oricărei pagini Web, trebuie să luați în considerare cât de important este să obțineți aceste browsere. Dacă 90% dintre clienții dvs. folosesc Netscape, atunci ar trebui să aveți un plan de rezervă pentru ei. Dar dacă mai puțin de 1% face, este posibil să nu conteze atât de mult.

Odată ce ați decis ce browsere veți încerca să îl sprijiniți, cel mai simplu mod este de a crea o pagină alternativă pentru a le vizualiza. Pe pagina alternativă, ați încorpora un videoclip utilizând codul HTML 4. Și apoi fie utilizați o anumită formă de detectare a browserului pentru a le redirecționa acolo, fie doar să adăugați un link către pagina respectivă.