Share
Astăzi, vă voi învăța cum să afișați videoclipuri pe web utilizând un player flash cu sursă deschisă. Vom acoperi toți pașii, inclusiv convertirea unui videoclip în formatul de fișier flv și încorporarea unui player personalizat utilizând SWFObject. Cea mai bună parte este faptul că Adobe Flash nu este obligatorie.
Primul pas al încorporării unui videoclip este codarea unui videoclip în format .flv. Aproape toți jucătorii online folosesc .flv ca standard pentru redarea fișierelor.
Pentru acest tutorial puteți descărca exemplul de video pe care l-am folosit numit Trusted Computing la arhive.org (Regizat de: Benjamin Stephan și Lutz Vogel.)
Dacă nu aveți Macromedia Flash, treceți la 1b.
Deschideți Macromedia Flash Video Encoder și adăugați videoclipul în coada Fișier> Adăugați. Apoi faceți clic pe Start queue la File> Start Queue și ați terminat codarea fișierului în format .flv.
Notă: Personalizarea la acest pas este minimă. Pentru mai mult control al mărimii și comprimării video, treceți la pasul 1b sau 1c.
Există multe opțiuni atunci când codificați în FLV. Opțiunea Windows pentru acest tutorial este Riva FLV Encoder deoarece este gratuită și personalizabilă.
Descărcați și instalați encoderul Riva FLV de pe site-ul Riva.
După deschidere, adăugați videoclipul la caseta video introdusă utilizând butonul de navigare. Programul va scoate automat videoclipul în același director.
Apoi, vom ajusta preferințele din secțiunea dreaptă. Pentru acest videoclip simplu vom folosi dimensiunea video de 320x240 și vom păstra toate celelalte setări ca prestabilite. Pentru a începe codarea, faceți clic pe FLV Encode în partea de jos a programului.
Notă: Încercați și mențineți dimensiunea fișierului mai scăzută ajustând setările și menținând rezoluția în jos. Cu cât este mai mare videoclipul, cu atât este nevoie de încărcare mai lungă.
Alegerea pentru Mac în acest tutorial este ffmpegX.
Descărcați și instalați codificatorul ffmpegX de pe site-ul Web.
După deschidere, adăugați videoclipul în caseta de intrare video utilizând butonul Deschidere. Programul va salva ieșirea video în același director, dar va trebui să actualizați numele fișierului la TrustedComputing_LAFKON_LOW.flv.
Apoi, schimbați formatul țintă în FLV și faceți clic pe codificare. Pentru a efectua modificări ale dimensiunii și comprimării videoclipului, dați clic pe filele diferite.
Notă: Încercați și mențineți dimensiunea fișierului mai scăzută ajustând setările și menținând rezoluția în jos. Cu cât este mai mare videoclipul, cu atât mai mult timp este necesar să se încarce.
În acest tutorial vom folosi playerul MPW open source pentru redarea fișierelor noastre flash.
Principalele motive sunt deoarece playerul MPW este open source și oferă atât personalizare ușoară, cât și personalizare mai detaliată.
Pentru a descărca player-ul, vizitați site-ul MPW Player. Site-ul web este în limba spaniolă, dar faceți clic pe butonul albastru de descărcare.
Fișierele necesare sunt mpw_player.swf și include folderul. Notă: Plasați fișierul flv codat, TrustedComputing_LAFKON_LOW.flv, în același folder ca și playerul și fișierul html.
Creați un document html gol și adăugați etichete de script pentru swfobject în capul documentului. Fișierul swfobject.js este localizat în folderul inclus în descărcare de la mpw player.
Apoi, vom introduce flash player-ul real și vom edita o linie. Plasați numele fișierului video, TrustedComputing_LAFKON_LOW.flv, sub flv flv.
Acest div este înlocuit de javascript folosind swfobject
Acum avem un jucător care funcționează cu aspectul implicit.
Personalizarea player-ului este foarte importantă și este motivul pentru care folosim MPW Player. Pentru a face actualizări ale playerului, trebuie doar să adăugăm variabile în JavaScript.
Prima personalizare pentru player va fi adăugarea unei fotografii de previzualizare pentru videoclip. Pentru a adăuga o fotografie, adăugați variabila jpg și apoi locația fotografiei. Fotografia folosită în tutorial este numită pictures_27_6 / how-to-play-video-using-an-open-source-player_10.jpg - o captură de ecran din videoclip. Notă: Nu uitați etichetele de script din capul documentului.
Acest div este înlocuit de javascript folosind swfobject
Pentru a face alte modificări, adăugați mai multe variabile. Iată un exemplu de variabile implicite adăugate cu comentarii explicând fiecare scop.
Acest div este înlocuit de javascript folosind swfobject
Încărcarea player-ului cu SWFObject ne permite să folosim o imagine sau un text de tip placeholder în cazul în care utilizatorul nu are flash sau javascript. Un motiv important pentru acest lucru este că multe computere sau dispozitive precum iPhone nu au Flash sau JavaScript activat.
În acest exemplu vom folosi o imagine simplă, dar orice cod va funcționa. SWFObject înlocuiește întregul conținut din interiorul unui div divizat. Când un utilizator nu are JavaScript sau Flash, browserul afișează pur și simplu conținutul divului. În acest caz, conținutul afișat este exact același fișier jpg, images_27_6 / cum se joacă-video-folosind-un-open-source-player_10.jpg, pe care l-am folosit pentru o previzualizare.
Pentru a pune mai mult de un jucător pe o singură pagină, asigurați-vă că fiecare div divizat are un nume unic. Apoi, actualizați referința JavaScript pentru a se potrivi cu div div.
Playerul MPW poate fi de asemenea folosit ca un player audio. Tot ce trebuie să faceți este să adăugați variabila mp3 în loc de flv.
MPW Player este open source, ceea ce înseamnă că oricine poate descărca și modifica playerul. Pentru a descărca codul sursă pentru player, vizitați această pagină web și descărcați "MPW Player SRC".
MPW Player nu este perfect pentru fiecare videoclip web. Încercați acești alți jucători gratis, deoarece ar putea funcționa mai bine pentru dvs..
Acest tutorial vă arată cum să codificați un videoclip în flv și să personalizați un player flash cu sursă deschisă pentru a afișa video și audio pe web.
Accentsconagua