Share
În prezentul tutorial vom crea o aplicație web simplă pentru a manipula manipularea video pentru web, vom încărca un fișier video în cloud și vom efectua transcodarea în direct și transformările în timp real pentru a crea un fișier video personalizat, orice dispozitiv. Pentru aceasta, vom folosi serviciul Cloudinary pentru stocarea, transcodarea, transformarea și streamingul videoclipurilor utilizând în acest caz pluginul jQuery disponibil.
"Dezvoltați o aplicație web sau mobilă? Cloudinary este modul în care trebuie să gestionați imaginile dvs. "Acesta este un extras din pagina Despre site a site-ului Cloudinary. Și în acest tutorial, prin utilizarea exemplelor reale și înainte / după comparații, vom afla că acest lucru nu este valabil doar pentru imagini, ci și pentru videoclipuri.
În acest tutorial vom crea un instrument pentru încărcarea și transformarea videoclipurilor folosind URL-ul fișierului încărcat. Vom dezvolta doar partea JavaScript pentru a încărca și transforma fișierele video. Descărcați codul de însoțire de urmat.
Cred că suntem de acord în mod sigur că imaginile și videoclipurile au un impact enorm în viața de astăzi și că, pe lângă dificultatea manipulării stocării și a livrării, dezvoltatorii trebuie să se ocupe de o mulțime de cheltuieli, de exemplu, să afișeze un videoclip pe un site web sau pe mobil dispozitiv. Trebuie să ținem cont de mărimea și formatul fișierului, indiferent dacă ar trebui sau nu să efectuăm fluxuri sau descărcări, optimizarea fișierelor și multe alte aspecte, iar această listă continuă și continuă când adăugăm noi obiective și fișiere.
Da, multimedia joacă un rol imens în aplicațiile de azi, indiferent dacă sunt pe web sau mobile, dar acest lucru nu ar trebui să fie cazul în timpul dezvoltării. Atunci când creați o nouă aplicație, trebuie să fim capabili să ne concentrăm asupra scopului și să nu pierdem timpul cu probleme de stocare și optimizare a fișierelor multimedia. Și acesta este exact locul unde Cloudinary vine la salvare.
CloudNary este un software SaaS (Software as a Service) care gestionează toate sarcinile legate de manipularea imaginilor și a imaginilor, cum ar fi încărcarea, stocarea, optimizarea, livrarea și chiar furnizarea multor alte caracteristici, cum ar fi transformarea imaginilor, trunchierea, scalarea și detectarea feței . Și toate transformările și transcodările sunt realizate în timp real și în timpul zborului. Cloudinary utilizează Amazon S3 pentru stocarea fișierelor și se integrează cu cele mai importante rețele de distribuire a conținutului, cum ar fi Akamai, care oferă o livrare foarte eficientă.
Pentru a urmări, veți avea nevoie de un cont Cloudinary pentru a încărca fișiere video și pentru a efectua transformări, pentru a crea un cont gratuit.
Dar asta e destul de chit Chat - haideți să ne murdărim mâinile și să arătăm câteva exemple reale despre ceea ce putem face.
În orice aplicație care utilizează imagini și videoclipuri pentru a angaja utilizatori, prima sarcină pe care trebuie să o ocupăm este încărcarea fișierelor. Pentru a urmări împreună cu tutorialul, continuați și creați un cont gratuit.
Pentru a încărca fișiere într-un cont Cloudinary, cererile trebuie să aibă o semnătură de solicitare bazată pe cheia dvs. API și pe secret. Cu toate acestea, există cazuri în care trebuie să vă permiteți să încărcați fișiere direct din browser, fără a trebui să trimiteți datele în spate pentru a semna solicitarea și pentru a încărca fișierele, și aici Încărcare nesemnată directă are loc.
Pentru a le permite, în Consola de conturi navigheaza catre Setări> Încărcare.
În partea de jos a paginii veți găsi un Încărcați presetări setarea și Activați încărcarea nesemnată opțiune. Trebuie să o selectăm astfel încât aplicația noastră să poată încărca fișiere fără a trebui să semneze cererile. Aceasta va crea o presetare de încărcare nouă pentru care încărcările nesemnate sunt activate. Luați notă de numele presetat așa cum o vom folosi într-un moment.
Asta e pentru partea de configurare. Apoi vom efectua încărcarea efectivă a fișierului și pentru asta vom folosi pluginul jQuery al lui Cloudinary. Accesați pagina de descărcare și descărcați-o.
Pentru ca acesta să funcționeze, trebuie să avem și jQuery, iar pentru încărcarea directă a browserului avem nevoie și de anumite dependente din pluginul jQuery File Upload. Aceste dependențe apar deja cu pluginul Cloudinary.
Pentru a încărca un fișier direct din browser, singurul lucru pe care trebuie să-l faceți este să activați Cloudinary în câmpul de introducere a fișierului ca atare.
Accentsconagua
$ ('.upload-file') .unsigned_cloudinary_upload ('UPLOAD_PRESET', cloud_name: 'CLOUD_NAME', etichete: 'UPLOAD_TAGS'); UPLOAD_PRESET parametrul este numele presetării în care este afișat Încărcări nesemnate directe sunt activate, cel creat în pasul anterior. Numele cloud este un nume atribuit tuturor utilizatorilor din sistemul Cloudinary. Acest lucru este obținut la crearea unui cont și este afișat în tabloul de bord al utilizatorului. În sfârșit, câmpul pentru etichete este opțional și puteți seta o etichetă specială pentru a indica faptul că un fișier a fost încărcat direct din browser.
După încărcarea unui fișier video, acum trebuie să îl transmitem către utilizatorii noștri. Serviciul va avea grijă de optimizarea și cachearea fișierului pentru livrare rapidă. În metoda noastră de controler, adăugați o pereche de suporturi pentru a stoca sursa, numele și calea completă a videoclipului încărcat.
var public_id = ";
Apoi, pentru a afișa previzualizarea video după încărcarea fișierului, vom lega un ascultător de evenimente unsigned_cloudinary_upload apel. După paranteza de închidere, adăugați următorul cod.
.bind ('cloudinarydone', funcția (e, data) public_id = data.result.public_id; $ ('.video-title') .html (data.result.original_filename; În cele din urmă trebuie să definim loadVideo care va avea grijă de setarea sursei de etichete video HTML5 și reîncărcare. În interiorul funcției controlerului, definiți un nou loadVideo metodă:
($) ($) ($) ($) ($). $ $ ($) .attr ('controale' ("redare automată", "redare automată")); ; Aici folosim pluginul jQuery al lui Cloudinary pentru a crea eticheta video a videoclipului încărcat, odată ce elementul HTML este creat adăugăm controale și Redare automata și adăugați-l în final video-container element. Rețineți că trebuie să setăm și cloud_name folosit pentru a încărca videoclipul.
Când este încărcat, Cloudinary transformă și codifică automat fiecare videoclip încărcat în MP4, WebM și OGV solicitate de browserele web și mobile și, de asemenea, în FLV pentru flash.
Am putea să o lăsăm așa și va funcționa, dar voi introduce o transformare UI pentru a oferi feedback despre ceea ce se întâmplă și a stabili câteva indicații ajutoare pentru transformările ulterioare. În interiorul cloudinarydone apel invers, sub loadVideo apelați metoda, adăugați următorul cod.
$ ('.help-block', $ ('upload-fișier') .parent ()) .hide (); $ ('.help-block', $ ('# video-lățime') .parent ()) .html ('Max:' + data.result.width); $ ('.help-block', $ ('# video-height') .parent ()) .html ('Max:' + data.result.height); $ ('# transform-controale') .slideDown (); Aici setăm doar câteva șiruri de ajutor pentru a indica dimensiunea videoclipului încărcat ca referință. Apoi afișăm formularul cu comenzile de transformare video.
În cele din urmă, doresc să introduc un mesaj care să indice că este în curs de încărcare video. La paranteza de închidere a cloudinarydone event binder, adăugați următorul cod.
.bind ('cloudinarystart', funcția (e, data) $ ('.help-block', $ ('upload-file') .parent ()). ("# transform-controls") .hide ();); Acest fragment oferă doar un feedback mic despre ceea ce se întâmplă în spatele scenei și ascunde comenzile de transformare video.
Până acum, așa bine - putem încărca videoclipuri și le putem afișa în browser cu doar câteva linii de cod. Dar acum, pentru distracția reală, să începem să facem transformări în fișierele noastre video doar prin modificarea adresei URL pe care o folosim pentru ao încărca.
Cele mai elementare transformări pe care le putem face cu fișierele video încărcate sunt de a schimba lățimea și înălțimea și de a personaliza modul în care ar trebui să se realizeze decuparea.
Există cinci parametri care controlează modul în care un fișier video va fi redimensionat și tăiat:
Aceștia sunt parametrii utilizați pentru redimensionarea unui fișier video. Pentru explicații suplimentare despre fiecare dintre acestea, consultați documentația oficială.
Există două moduri în care Cloudinary efectuează transformări: leneș și cu nerăbdare.
O transformare leneșă se aplică atunci când se solicită un fișier încărcat. Prima dată când este accesat un fișier transformat, transformarea este efectuată și fișierul rezultat va fi stocat în cache pentru utilizare ulterioară.
O transformare nerăbdătoare este aplicată atunci când transformările sunt aplicate fișierului pe măsură ce acesta se încarcă, astfel că, atunci când a terminat încărcarea, versiunea transformată este imediat disponibilă.
Ca o notă specială aici, atunci când aplicați o transformare leneșă pentru prima dată, fișierul este transmis în flux ca transformare apare, astfel încât, în cazul unui fișier video, începe să se joace imediat, în timp ce transformarea se face on-the-fly.
Există un API și mai multe SDK-uri pentru a accesa toate capabilitățile Cloudinary, în acest exemplu vom folosi pluginul jQuery pentru transformările video.
Deci, acum să punem în aplicare funcționalitatea necesară în aplicația noastră pentru a efectua și afișa transformări în videoclipurile noastre. Primul lucru pe care trebuie să-l faceți este să creați un nou suport în controlerul nostru pentru obiectul transformări. În partea de sus a declarației variabilelor, adăugați următorul cod:
var transform = cloud_name: 'CLOUD_NAME';
Aici suntem aici cloud_name atribui unui a tranform obiect pentru a seta restul parametrilor de transformare.
În loadVideo () metoda, trebuie să înlocuim $ .cloudinary.video al doilea parametru cu noul parametru transforma obiect.
$ ($ video-container) .html ($ (.cloudinary.video (public_id, transform)) .attr ("controale", "controale") .attr ("autoplay", "autoplay")); Aceasta este toata pregatirea de care avem nevoie pentru a redimensiona fisierele noastre video. Dacă bifați marcajul HTML, veți observa că formularul care conține câmpurile de transformare invocă o metodă de aplicare atunci când este trimisă. Vom declara acum această metodă, deci în partea de jos a controlerului adăugați următorul cod:
$ scope.update = function () var width = $ ('# video-lățime') .val () = cultură]: verificat ') .val (), gravitatea = $ (' input [name = gravity]: checked ') .val (), background = $ (' video-background '); transform.crop = cultura; dacă (lățimea) transform.width = width; dacă (înălțime) transform.height = height; dacă (gravitatea) transform.gravity = gravitatea; dacă (fundal) transform.background = background; loadVideo (); ; Această metodă este oarecum lungă, dar ceea ce face este să creeze preluarea parametrilor de transformare introduși în forma transformărilor și să se stabilească parametrii corespunzători în anterior transforma obiect.
Când actualizăm videoclipul utilizând formularul de transformare, loadVideo metoda va fi executată cu noul obiect de transformare. Și videoclipul va fi actualizat.
Înainte de a continua cu următoarele transformări, trebuie să vă asigurați că ați resetat transforma obiect pentru fiecare fișier încărcat, în interiorul cloudinarystart apel invers, adăugați următorul cod.
transform = cloud_name: 'CLOUD_NAME';
Aici doar restabilim transforma obiecte față de starea inițială cu doar cloud_name set de parametri.
O altă transformare care poate fi efectuată este rotirea videoclipului streaming. La fel ca în cazul transformărilor de redimensionare și recoltare, putem folosi unul dintre SDK-urile sau pluginurile disponibile sau putem folosi adresa URL pentru a seta parametrii de rotație. Pentru pluginul jQuery parametrul de rotire a videoclipului generat este unghi.
Încă o dată, trebuie să setăm parametrul de rotire pentru transforma obiect, în interiorul Actualizați metoda de declarare, chiar înainte de loadVideo apel adăugați următorul cod.
var unghi = $ (unghi video) .val (); dacă (unghiul) transform.angle = unghiul;
Cu acest ultim fragment putem face rotația videoclipurilor noastre folosind comenzile de transformare, astfel încât să redirecționăm un videoclip și să îl redimensionăm după cum urmează.
Există multe alte transformări care pot fi aplicate fișierelor video, inclusiv transcodarea video, manipularea audio, adăugarea suprapunerii și transformarea GIF. Pentru o listă completă a parametrilor disponibili, consultați documentația oficială.
Vom fi bucuroși să oferim un cititor norocos, aleator ales, patru luni libere pentru oricare dintre planurile noastre de pe raft (puteți vedea planurile noastre aici.
Pur și simplu tweet un link spre acest post folosind butonul de partajare Twitter situat pe bara laterală.
După încheierea concursului, Cloudinary va contacta la întâmplare un câștigător norocos și va urma cu dvs. pentru a vă revendica premiul.
În acest tutorial efectuăm încărcări și transformări video utilizând jQuery, dar există și multe alte SDK-uri care integrează cu ușurință orice aplicație cu serviciul Cloudinary. Și toate transcodările și transformările sunt efectuate pe cloud fără a necesita software suplimentar, acest lucru face serviciul o soluție cu adevărat viabilă și simplă pentru manipularea media în aplicații mobile și web. Pentru o listă completă a tuturor SDK-urilor și pluginurilor disponibile, consultați documentația oficială.
Cu Cloudinary putem gestiona imagini și clipuri video foarte ușor și fiabil. Acesta va avea grijă de manipularea tuturor stocării, optimizării, transformării, memorării în cache și livrării.
Toate transformările și manipulările efectuate în tutorial pot fi realizate și cu ajutorul oricăror SDK-uri și plugin-uri disponibile.
Lăsați-vă comentariile, întrebările, gândurile și sugestiile în secțiunea de comentarii de mai jos.
