Share
I den här handledningen kommer vi att skapa en enkel webbapplikation för att hantera videomanipulation för webben, vi laddar upp en videofil i molnet och utför livetranscoding och transformations on-the-fly för att skapa en skräddarsydd videofil att strömma på vilken enhet som helst. För detta kommer vi att använda Cloudinary-tjänsten för att lagra, omvandla, omvandla och strömma videor med hjälp av det tillgängliga jQuery-pluginet.
"Utvecklar du en webb- eller mobilapplikation? Cloudinary är hur du ska hantera dina bilder. "Detta är ett utdrag som tagits från Cloudinary-webbplatsens Omsida. Och i denna handledning, genom användandet av riktiga exempel och före / efter jämförelser, kommer vi att ta reda på att detta inte bara är sant för bilder utan även för videor.
I den här handledningen skapar vi ett verktyg för att ladda upp och omvandla videor med den uppladdade filadressen. Vi kommer bara att utveckla JavaScript-delen för att ladda upp och omvandla videofilerna. Ladda ner den medföljande koden för att följa med.
Jag tror att vi säkert kan komma överens om att bilder och videoklipp har en enorm inverkan i dagens liv, och förutom besväret med hantering av lagring och leverans måste utvecklarna hantera mycket omkostnader för att säga att visa en video på en webbplats eller mobil anordning. Vi måste ta hänsyn till filens storlek och format, oavsett om vi ska strömma eller ladda ner, filoptimering eller många andra aspekter, och den här listan fortsätter bara om och om när vi lägger till nya mål och filer.
Ja, multimedia spelar en stor roll i dagens applikationer, antingen webbaserade eller mobila, men det borde inte vara fallet under utvecklingstiden. När vi skapar en ny applikation måste vi kunna fokusera på dess syfte och inte slösa tid med besväret med lagring och optimering av multimediefiler. Och det här är just där Cloudinary kommer till undsättning.
Cloudinary är en SaaS (Programvara som en tjänst) som hanterar alla uppgifter relaterade till bild- och videomanipulation, t.ex. uppladdning, lagring, optimering, leverans och till och med tillhandahåller många andra funktioner som bildtransformering, beskärning, skalning och ansiktsdetektering . Och alla transformationer och transkodning utförs i realtid och på flykt. Cloudy använder Amazon S3 för fillagring och integrerar med ledande innehållsleveransnätverk, till exempel Akamai för att erbjuda mycket effektiv leverans.
För att följa med behöver du ett molnt konto för att ladda upp videofiler och utföra omvandlingar, fortsätt och skapa ett gratis konto.
Men det är tillräckligt med chit-låt oss få våra händer smutsiga och visa några riktiga exempel på vad vi kan göra.
I alla program som använder bilder och videoklipp för att engagera användare är den första uppgiften vi måste ta hand om filuppladdning. För att följa med handledningen, fortsätt och skapa ett gratis konto.
För att ladda upp filer till ett molnt konto måste förfrågningarna ha en begäran om signatur baserad på din API-nyckel och hemlighet. Det finns dock fall där du behöver stödja uppladdning av filer direkt från webbläsaren utan att behöva skicka data till bakre änden för att underteckna förfrågan och ladda upp filerna, och det är här Direkt osignerad uppladdning äger rum.
För att aktivera det, i din Kontokonsol navigera till Inställningar> Ladda upp.
Nederst på sidan hittar du en Överför förinställningar inställning och Aktivera unsigned uploading alternativ. Vi måste välja det så att vår applikation kan ladda upp filer utan att behöva skriva in förfrågningarna. Detta skapar en ny uppladdningsförinställning för vilka unsigned uploads är aktiverade. Notera det förinställda namnet eftersom vi kommer att använda det på ett ögonblick.
Det är det för konfigurationsdelen. Nästa kommer vi att utföra den faktiska uppladdningen av filen, och för det kommer vi att använda Cloudinarys jQuery-plugin. Gå till hämtningssidan och ladda ner den.
För att det ska fungera måste vi också ha jQuery, och för direkta webbläsaruppladningar behöver vi också vissa beroenden från jQuery File Upload-plugin. Dessa beroenden kommer redan med Cloudinary plugin.
För att ladda upp en fil direkt från webbläsaren är det enda som du behöver göra att aktivera Cloudinary i filinmatningsfältet som så.
Accentsconagua
$ ('.upload-fil') .unsigned_cloudinary_upload ('UPLOAD_PRESET', cloud_name: 'CLOUD_NAME', taggar: 'UPLOAD_TAGS'); De UPLOAD_PRESET parameter är namnet på förinställningen där Direkta usignerade uppladdningar är aktiverade, den som skapades i föregående steg. Molnnamnet är ett namn som är tilldelat alla användare i Cloudinary-systemet. Detta uppnås när du skapar ett konto och visas i användarens instrumentpanel. Slutligen är fältet frivilligt, och du kan ange en specialtagg för att indikera att en fil har laddats upp från webbläsaren direkt.
Efter att ha laddat upp en videofil behöver vi nu strömma den till våra användare. Tjänsten tar hand om att optimera och cache filen för snabb leverans. I vår regleringsmetod lägger du till ett par hållare för att lagra källan, namnet och hela sökvägen för den uppladdade videon.
var public_id = ";
För att visa vår videoförhandsvisning när filen är uppladdad, kommer vi att binda en händelseloggare till unsigned_cloudinary_upload ring upp. Efter den stängande parentesen lägger du till följande kod.
.binda ("cloudinarydone", funktion (e, data) public_id = data.result.public_id; $ ('.video-title') .html (data.result.original_filename); loadVideo ();); Slutligen måste vi definiera loadVideo metod som kommer att ta hand om att ställa in källkoden för HTML5-videotaggen och ladda om den. Inne i styrfunktionen, definiera en ny loadVideo metod:
loadVideo = function () $ ('# video-container') .html ($ ($ .cloudinary.video (public_id, cloud_name: 'CLOUD_NAME')) .attr ('kontroller', 'kontroller') .attr ("autoplay", "autoplay")); ; Här använder vi Cloudinarys jQuery-plugin för att skapa videotaggen för den uppladdade videon, när HTML-elementet har skapats lägger vi till kontroller och autospela parameters och slutligen lägga till den till video-behållare element. Observera att vi också måste ställa in cloud_name brukade ladda upp videon.
När uppladdade Cloudinary automatiskt omvandlar och trasncodes varje uppladdad video till MP4, WebM och OGV som krävs av web- och mobila webbläsare, och även till FLV för blixt.
Vi skulle kunna lämna det så, och det kommer att fungera, men jag ska introducera en del UI-transformation för att ge lite feedback om vad som händer och sätta några hjälpkod för senare omvandlingar. Inuti cloudinarydone återuppringning, under loadVideo metodsamtal, lägg till följande kod.
$ ('.help-block', $ ('# upload-file') .parent ()) .hide (); $ ('.help-block', $ ('# video-bredd') .parent ()) .html ('Max:' + data.result.width); $ ('.help-block', $ ('# videohöjd') .parent ()) .html ('Max:' + data.result.height); $ ('# transform-controls'). SlideDown (); Här ställer vi bara in några hjälmsträngar för att ange storleken på den uppladdade videon som referens. Då visar vi formuläret med videoförvandlingskontrollerna.
Slutligen vill jag presentera ett meddelande som visar att en videoöverföring pågår. Vid den stängande parentesen av cloudinarydone händelsebindemedel, lägg till följande kod.
.binda ("cloudinarystart", funktion (e, data) $ ('.help-block', $ ('# upload-file') .parent ()) .show (). html ('Överför ...'); ('# transform-controls') .hide ();); Det här klicket ger bara användaren en liten återkoppling om vad som händer bakom kulisserna och döljer videoförvandlingskontrollerna.
Hittills så bra-vi kan ladda upp videor och få dem att visas i webbläsaren med bara ett par rader av kod. Men nu för den riktiga kulan, låt oss börja göra omvandlingar till våra videofiler bara genom att ändra webbadressen som vi använder för att ladda den.
De mest grundläggande omvandlingar som vi kan göra med de uppladdade videofilerna är att ändra bredden och höjden och anpassa hur beskärningen ska utföras.
Det finns fem parametrar som styr hur en videofil ska ändras och beskäras:
Det är parametrarna som används för att ändra storlek på en videofil. För ytterligare förklaring om var och en, se den officiella dokumentationen.
Det finns två sätt på vilka Cloudinary utför transformationer: lustigt och ivrigt.
En lat omvandling appliceras on-the-fly när du begär en uppladdad fil. Första gången en transformerad fil öppnas utförs transformationen och den resulterande filen cachas för framtida användning.
En ivrig omvandling tillämpas när transformationerna appliceras på filen när den laddas upp, så när den är klar att ladda upp den omformade versionen är omedelbart tillgänglig.
Som en speciell anteckning här, när du applicerar en lat omvandling för första gången, streamas filen när transformationen uppträder, så när det gäller en videofil börjar den spela omedelbart medan omvandlingen görs på flyg.
Det finns ett API och flera SDK för att få tillgång till alla Cloudinary-funktionerna, i det här exemplet kommer vi att använda jQuery-plugin för videoförvandlingarna.
Så nu låter vi implementera den nödvändiga funktionaliteten i vår applikation för att utföra och visa omvandlingar till våra videoklipp. Det första du behöver göra är att skapa en ny hållare i vår controller för transformationsobjektet. Överst på variabeldeklarationen lägger du till följande kod:
var transform = cloud_name: 'CLOUD_NAME';
Här ställer vi in cloud_name attribut till a TRANFORM motsätta sig att ställa in resten av transformationsparametrarna.
I loadVideo () metod, vi behöver ersätta $ .cloudinary.video andra parametern med den nya omvandla objekt.
$ ('# video-container') .html ($ ($ .cloudinary.video (public_id, transform)) .attr ('kontroller', 'kontroller') .attr ('autoplay', 'autoplay')); Det är all den förberedelse vi behöver för att ändra storlek på våra videofiler. Om du kontrollerar HTML-uppteckningen noterar du att formuläret som innehåller transformationsfälten åberopar en räckviddsmetod när den skickas in. Vi kommer nu att förklara den metoden, så i botten av kontrollenheten lägger du till följande kod:
$ scope.update = function () var bredd = $ ('# videobredd') .val (), height = $ ('# videohöjd') .val (), crop = $ = gräns]: val (), gravitation = $ ('inmatning [namn = gravitation]: markerat') .val (), bakgrund = $ ('# video-bakgrund') .val (); transform.crop = gröda; om (bredd) transform.width = width; om (höjd) transform.height = height; om (gravitation) transform.gravity = gravity; om (bakgrund) transform.background = background; loadVideo (); ; Denna metod är lite lång, men vad det gör är att skapa hämta transformationsparametrarna som införs i transformationsformen och ställa in lämpliga parametrar i det tidigare omvandla objekt.
När vi uppdaterar videon med hjälp av transformationsformuläret, loadVideo Metoden kommer att utföras med det nya transformationsobjektet. Och videon kommer att uppdateras.
Innan vi fortsätter med nästa omvandlingar, måste vi se till att återställa omvandla objekt för varje uppladdad fil, inuti cloudinarystart återuppringning, lägg till följande kod.
transform = cloud_name: 'CLOUD_NAME';
Här återställer vi bara omvandla motsätta sig det ursprungliga tillståndet med bara cloud_name parameteruppsättning.
En annan omvandling som kan utföras är att rotera den strömmade videon. Precis som med storlekarna för omvandling och beskjutning kan vi använda en av de tillgängliga SDK: erna eller plugins, eller vi kan använda URL-adressen för att ställa in rotationsparametrarna. För jQuery-plugin är parametern för att rotera den genererade videon vinkel.
Än en gång måste vi ställa in rotationsparametern för omvandla objekt, inuti uppdatering metoddeklaration, strax före loadVideo Ring lägg till följande kod.
varvinkel = $ (# videovinkel) .val (); om (vinkel) transform.angle = angle;
Med det här sista stycket kan vi nu utföra rotation till våra videoklipp med hjälp av tranformation kontrollerna så att vi skulle rotera en video och ändra storlek på den som följande.
Det finns många andra omvandlingar som kan tillämpas på videofiler, inklusive videokodning, ljudmanipulation, läggning av överlägg och GIF-omvandling. För en fullständig lista över tillgängliga parametrar, se den officiella dokumentationen.
Vi kommer gärna ge en lycklig, slumpmässigt vald läsare, fyra månader gratis för någon av våra utanför hyllplanerna (du kan se våra planer här.
Enkelt tweet en länk till det här inlägget med hjälp av Twitter-delningsknappen som finns på sidofältet.
När tävlingen är över kommer Cloudinary att kontakta en lyckosam vinnare slumpmässigt och följa upp med dig för att hävda ditt pris.
I denna handledning utför vi videouppladdningar och transformationer med jQuery, men det finns också många andra SDK-filer för att enkelt integrera alla applikationer med Cloudinary-tjänsten. Och all transkodning och transformationer utförs på molnet utan att behöva ytterligare mjukvara, vilket gör tjänsten till en verkligt bärbar och enkel lösning för mediehantering i mobila och webbapplikationer. För en komplett lista över alla tillgängliga SDK och plugins, se den officiella dokumentationen.
Med Cloudinary kan vi hantera bilder och videoklipp på ett enkelt och pålitligt sätt. Det kommer att ta hand om hantering av all lagring, optimering, transformation, caching och leverans.
Alla omvandlingar och manipulationer som utförts i handledningen kan också göras med hjälp av någon av de tillgängliga SDK och plugins.
Lämna dina kommentarer, frågor, tankar och förslag i kommentarfältet nedan.
