Share
Dacă v-ați dorit vreodată să includeți materiale video streaming în desenele dvs., dar nu doriți să vă deranjezi cu soluții de cod murdar (sau Flash), avem două soluții rapide și ușoare pentru dvs. Astăzi, vom examina ceea ce fiecare soluție oferă designerilor web și cum să le folosiți pe ambii în propriile proiecte.
Pe suprafata, streaming-ul video prin intermediul unei pagini web nu este ceva ce o multime de designeri web au in varful mintii lor? Acest lucru este de înțeles deoarece doar aceste două cuvinte ("Web" și "Video") implică o bază de cunoștințe care se găsește cel mai bine în altă parte a Universului Envato?
? Dar dacă am să vă spun că adăugarea de materiale video în flux către paginile dvs. este acum mai ușoară decât adăugarea unui jpg. Acum că am atenția voastră? să ne aruncăm în chestiile bune:
Înainte de a începe să vă parcurg procesul pas cu pas, să examinăm mai întâi istoria "streaming video web" din punctul de vedere al designerilor web:
Să presupunem că lucrați la un proiect și că gestionați codificarea de bază de bază. În trecut, adăugarea de materiale video streaming la desenele noastre a fost un proces destul de complicat - care necesită să știi (și să ai o licență) la Adobe Flash. Presupunând că aveți Flash și cunoașteți modul în care vă aflați, trebuie să obțineți videoclipul în format corect, să-l importați în Flash, să treceți prin procesul arhaic de configurare a videoclipului și apoi să îl exportați. În cele din urmă, va trebui să îl încorporați corect în site-ul dvs. Web. Veteranii veterani Flash ar putea fi capabili să tragă rapid acest lucru, dar pentru majoritatea oamenilor pe partea de design a lucrurilor, este o durere de cap.
O altă soluție posibilă ar fi utilizarea unui serviciu precum YouTube sau Vimeo. Acest lucru este bine pentru majoritatea oamenilor, dar ce despre aceia dintre noi care doresc pur și simplu să afișeze videoclipuri pe web fără branding-ul sau alte avantaje pe care le adaugă site-uri precum YouTube și Vimeo? Până de curând, într-adevăr nu a existat o soluție simplă pentru acest lucru.
Datorită promisiunii ecranului de fum HTML5, am încercat recent unele dintre noile soluții de streaming video. Desigur, tocmai atunci când Google a adus webM în îmbrățișarea sa iubitoare și lucrurile au devenit mult mai complicate decât am negociat. În mod esențial, m-am predat și am stompat cu o atitudine "Să-l sortezi lui Dumnezeu". În mod clar, dezbaterea privind transmisia video streaming nu a fost rezolvată încă.
Câțiva ani în urmă, am scris un articol, The Rise of Flash Video, care urmărește o dezbatere similară care a început atunci când videoclipul a lovit de fapt web-ul și standardul Flash Video a luat amploare. Din nou, esența argumentului a fost: "Trebuie să existe o modalitate mai ușoară de a face acest lucru". Ghici ce? Acum este.
În ultimii ani, Adobe a fost implicat în Open Source Media Framework. Am găsit întotdeauna OSMF pentru a fi o serie de tehnologii și tehnici uimitoare care, sincer, dă durerea dinților. Tehnologiile sunt serios cool, foarte tare și distractive pentru a vă împrăștia cu - dar sunt destinate dezvoltatorilor? și dacă există o modalitate de a complica prea mult o soluție simplă, codec-urile hardcore ale lumii o vor găsi. OSMF nu este diferit. Dacă vă plimbați prin intermediul site-ului, nu există prea multe în ceea ce privește soluțiile simple, plug and play pentru noi, designerii umili, de folosit.
Numai atunci când renunți la câteva pași, obiectivul proiectului OSMF devine clar: "pentru a oferi experiențe de redare video de înaltă calitate". Asta inseamna o incarcare video foarte buna, jucatori cu adevarat slick si nici unul dintre lucrurile suplimentare aruncate de Vimeo si YouTube. În cazul în care acest lucru devine cu adevărat interesant pentru noi este că acum putem intra în distracție și nu va trebui să învețe ceva nou.
În acest tutorial vă voi arăta două modalități de a realiza acest lucru. Primul este "Drop Dead Simple", iar al doilea ridică nivelul la "Dead Simple". Pentru a intra în joc tot ce trebuie să faceți este să încărcați un videoclip (unul este inclus împreună cu acest tutorial pentru fiecare soluție) într-un director de pe un site web. Să începem:
Această parte este destul de simplă - încărcați doar un videoclip pe serverul dvs. web folosind un program FTP sau ceva similar. Pentru această demonstrație vom folosi fișierul "Stockhorn.f4v". Tot ce trebuie să ajungeți aici este adresa URL a videoclipului dvs. Păstrați este undeva pe care îl puteți copia / lipi pentru următorul pas.
În esență, acest site oferă un jucător OSMF pentru mase. Dacă doriți să încărcați un fișier mp4, flv sau f4v în pagina dvs. web, fără să știți cum să lingeți Flash, Actionscript sau Flex, acesta este locul potrivit pentru dvs. Ce trebuie să faceți este să faceți clic pe butonul Configurați redarea fișierelor flash în partea de jos a paginii. Aceasta va deschide pagina de configurare a redării media Flash Media.
Trebuie să introduceți calea absolută a videoclipului și a extensiei fișierului video. Cele trei formate utilizate de Flash sunt flv, f4v și H.264. Dacă nu sunteți siguri cu privire la modul în care acestea sunt create, nu ezitați să verificați seria de bază de conținut Flash Video la activ.tutsplus. Trebuie, de asemenea, să introduceți valorile de lățime și înălțime ale videoclipului - valorile pentru videoclipul inclus sunt 720 X 405. Odată ce ați făcut acest lucru, faceți clic pe butonul Previzualizare din zona Previzualizare Player și videoclipul dvs. ar trebui să înceapă să fie redat.
Dacă utilizați Dreamweaver, deschideți pagina, selectați și introduceți pur și simplu codul din player în vizualizarea Cod. Dacă testați pagina, veți vedea redarea videoclipului în browser. În acest moment, trebuie doar să încărcați pagina html la diecia care conține videoclipul de pe site-ul dvs..
Aceștia sunt pașii și, dacă vă îndreptați, veți vedea jocul video. Singurul lucru pe care l-am făcut altfel era să includ un cadru de postere. Mai multe despre asta în secțiunea următoare.
Așa cum am spus în partea de sus, nu voi merge "tot techie" aici, dar există și o altă modalitate care este puțin mai complicată decât ceea ce am arătat, merită menționat, numit Strobe Media Playback.
Strobe Media Playback utilizează aceeași abordare ca Flash Media, dar există o tonă mai mare de putere sub hota. De exemplu, puteți utiliza rate de biți multiple pentru a detecta conexiunile și pentru a alimenta funcția de voce adecvată pe baza vitezei de conectare a utilizatorilor. Puteți personaliza comenzile, utilizați-l pentru a reda audio, afișa jpg-urile și doar despre orice suport media care va apărea într-un SWF Flash. În acest exemplu vom adopta aceeași abordare "fără cod" ca în soluția anterioară, dar voi adăuga o "răsucire". Dacă vrei să lucrezi împreună cu mine, toate fișierele de care ai nevoie sunt în dosarul Strobe din descărcarea tutorialului.
La fel ca înainte - încărcați doar un videoclip pe serverul dvs. web folosind un program FTP sau ceva similar. Pentru această parte a demo-ului vom folosi fișierul "GeorgeSquare.mp4". Tot ce trebuie să ajungeți aici este adresa URL a videoclipului dvs. Păstrați este undeva pe care îl puteți copia / lipi pentru următorul pas.
Versiunea pe care o doriți este versiunea de redare Strobe Media Play 1.5.1. Cu Strobe, versiunile beta sunt numite "Sprints", iar actualul Sprint include suport pentru lucruri precum noua caracteristică Stage Video a Flash Player. Când dezarhivați fișierul, aveți câteva opțiuni: plasați dosarul la rădăcina serverului Web al computerului sau încărcați-l în rădăcina site-ului dvs. Web. Am creat un director numit "smp" și am încărcat toate fișierele pe serverul meu web.
Un cadru de postere este o mare oportunitate de a face un branding cu un video.În cazul în care primul cadru al video este doar de gând să stea acolo și să semene cu o imagine, de ce nu pune imaginea de a lucra. În acest caz, am deschis pur și simplu un nou document Fireworks CS5 care a corespuns dimensiunilor videoclipului - 1280 de 720-, a asamblat activele și a salvat-o ca o imagine aplatizată .jpg în același folder ca și videoclipul.
Acest dosar este situat în descărcarea Strobe. Atunci când se deschide, va arăta mai degrabă familiar. Diferența principală dintre acest document și cea pe care ați întâlnit-o cu Flash Media Playback este că opțiunile sunt mult mai extinse, iar playerul este unul pe care îl dețineți? nu unul situat pe site-ul Adobe. Când pagina se deschide, veți vedea că există multe opțiuni. Cele importante, în scopul acestui tutorial sunt:
Parametri încorporați:
Flash vars:
Dacă doriți o explicație mai detaliată a acestei pagini și Flash Vars, colegul meu Joseph Labreque, a postat o imagine de ansamblu destul de extinsă asupra redării Strobe Media Playback la activ.tutsplus.
Ar trebui să vedeți că rama posterului dvs. apare în player. Dacă nu doriți ca butonul de redare mare de pe cadrul posterului să setați proprietatea playButtonOverlay la False în zona Flash vars.
Când se deschide fișierul, redați filmul. Lucrul cu adevărat curat este că toate controalele sunt active - adică dacă folosești un fișier HD mp4, videoclipul tău va crește pentru a umple ecranul cu pixelizare puțin sau deloc.
In cele din urma! Bine ați venit în lumea streaming video Flash, fără să vă dorești să știi nimic despre Flash. Faceți clic aici pentru a vedea acest proiect pe site-ul meu.
După cum am subliniat la începutul acestei lucrări, nu cred că Flash Video va dispărea în curând. Cu toate acestea, odată cu apariția unui mediu pe mai multe ecrane, obținerea aceluiași video pentru a reda un Droid, iPhone, Samsung Galaxy Tablet și televizorul dvs. HD este acum posibil. Acest lucru face, evident, designerii web un pic nervos, pentru că? bine? deoarece încorporarea video streaming în trecut a fost destul de tehnică. Nu mai e cazul! După cum am subliniat în această piesă, dacă puteți copia și lipi textul într-o pagină web, Adobe are câteva soluții pentru dvs..
Dacă vedeți că acest lucru este interesant și că doriți să vă grăbiți în OSMF sau Strobe, ar trebui să începeți cu seria lui Joeseph Labreque care a început la activ. tutsplus, pe măsură ce face mai multe detalii despre chestiile tehnice din jurul dezbaterii video streaming.
Accentsconagua