Share
I den nåværende opplæringen skal vi lage et enkelt webprogram for å håndtere videomanipulering på nettet, vi vil laste opp en videofil til skyen og utføre live transcoding og transformasjoner on-the-fly for å opprette en skreddersydd videofil for å streame på en hvilken som helst enhet. For dette skal vi bruke Cloudinary-tjenesten til å lagre, kryptere, transformere og streame videoer ved hjelp av i dette tilfellet det tilgjengelige jQuery-pluginet.
"Utvikler du et web- eller mobilprogram? Cloudinary er hvordan du skal administrere bildene dine. "Dette er et utdrag tatt fra Cloudinary-nettsiden Om side. Og i denne opplæringen, gjennom bruk av virkelige eksempler og før / etter sammenligninger, vil vi finne ut at dette ikke bare er sant for bilder, men for videoer også.
I denne opplæringen vil vi lage et verktøy for å laste opp og transformere videoer ved hjelp av den opplastede filadressen. Vi skal bare utvikle JavaScript-delen for å laste opp og transformere videofiler. Last ned den medfølgende koden for å følge med.
Jeg tror vi kan trygt være enige om at bilder og videoer har stor innvirkning i dagens liv, og i tillegg til å måtte håndtere lagring og levering, må utviklerne håndtere mye overhead, for eksempel å vise en video på en nettside eller mobil enhet. Vi må ta hensyn til størrelsen og formatet på filen, enten vi skal streame eller laste ned, filoptimalisering og mange andre aspekter, og denne listen går bare om og om når vi legger til nye mål og filer.
Ja, multimedia spiller en stor rolle i dagens applikasjoner, enten nettbasert eller mobil, men dette bør ikke være tilfelle i utviklings tid. Når du oppretter en ny applikasjon, må vi kunne fokusere på dens formål, og ikke kaste bort tiden med stresset med lagring og optimalisering av multimediefiler. Og dette er nettopp hvor Cloudinary kommer til redning.
Cloudinary er en SaaS (programvare som en tjeneste) som håndterer alle oppgavene knyttet til bilde- og videomanipulering, for eksempel opplasting, lagring, optimalisering, levering og til og med å tilby mange andre funksjoner som bildeomforming, beskjæring, skalering og ansiktsgjenkjenning . Og alle transformasjoner og transkoding utføres i sanntid og på fly. Cloudy bruker Amazon S3 til filoppbevaring og integreres med ledende Content Delivery Networks, for eksempel Akamai for å tilby svært effektiv levering.
For å følge med må du ha en skyskonto for å laste opp videofiler og utføre transformasjoner, gå videre og opprett en gratis konto.
Men det er nok chitch-la oss få våre hender skitne og vise noen virkelige eksempler på hva vi kan gjøre.
I enhver applikasjon som bruker bilder og videoer for å engasjere brukere, er den første oppgaven vi må ta vare på, filopplasting. For å følge med veiledningen, gå videre og opprett en gratis konto.
For å laste opp filer til en Cloudinary-konto, må forespørslene ha en forespørsels signatur basert på API-nøkkelen din og hemmelig. Det er imidlertid tilfeller når du trenger å støtte opplasting av filer direkte fra nettleseren, uten å måtte sende dataene til bakenden for å signere forespørselen og laste opp filene, og det er her Direkte usignert opplasting tar plass.
For å aktivere det, i din Konto Konsoll navigere til Innstillinger> Last opp.
Nederst på siden finner du en Last inn forhåndsinnstillinger innstilling og Aktiver usignert opplasting alternativ. Vi må velge det slik at søknaden vår kan laste opp filer uten å måtte signere forespørslene. Dette vil opprette en ny opplastingsforhåndsinnstilling for hvilke usignerte opplastinger er aktivert. Legg merke til det forhåndsinnstilte navnet som vi vil bruke det på et øyeblikk.
Det er det for konfigurasjonsdelen. Deretter skal vi utføre den faktiske opplasting av filen, og for det vil vi bruke Cloudins jQuery-plugin. Gå til nedlastingssiden og last den ned.
For at det skal fungere, må vi også ha jQuery, og for direkte nettleseropplastinger trenger vi også avhengigheter fra jQuery File Upload-plugin. Disse avhengighetene kommer allerede med Cloudinary plugin.
For å laste opp en fil direkte fra nettleseren, er det eneste du trenger å gjøre, å aktivere Cloudinary i filinputfeltet som det.
Accentsconagua
$ ('.upload-fil') .unsigned_cloudinary_upload ('UPLOAD_PRESET', cloud_name: 'CLOUD_NAME', tagger: 'UPLOAD_TAGS'); De UPLOAD_PRESET parameteren er navnet på forhåndsinnstillingen der Direkte usignerte opplastinger er aktivert, den som ble opprettet i forrige trinn. Skynavnet er et navn som er tildelt alle brukere i Cloudinary-systemet. Dette oppnås når du oppretter en konto og vises i brukerens betjeningspanel. Til slutt er merkingsfeltet valgfritt, og du kan angi en spesiell kode for å indikere at en fil ble lastet opp direkte fra nettleseren.
Etter at du har lastet opp en videofil, trenger vi nå å streame den til brukerne våre. Tjenesten vil sørge for optimalisering og caching av filen for rask levering. I vår kontrolleringsmetode legger du til et par holdere for å lagre kilden, navnet og den fullstendige banen til den opplastede videoen.
var public_id = ";
Så for å vise vår videobilde når filen er lastet opp, skal vi binde en hendelselytter til unsigned_cloudinary_upload anrop. Etter den avsluttende parentesen legger du til følgende kode.
.bind ("cloudinarydone", funksjon (e, data) public_id = data.result.public_id; $ ('.video-title') .html (data.result.original_filename); loadVideo ();); Til slutt må vi definere loadVideo metode som vil ta seg av å sette HTML5-videotagekilden og laste den på nytt. Inne i kontrollerfunksjonen, definer en ny loadVideo metode:
loadVideo = funksjon () $ ('# video-container') .html ($ ($ .cloudinary.video (public_id, cloud_name: 'CLOUD_NAME')) .attr ('kontroller', 'kontroller') .attr ('autoplay', 'autoplay')); ; Her bruker vi Cloudinary's jQuery-plugin for å lage videotaggen til den opplastede videoen, når HTML-elementet er opprettet, legger vi til kontroller og Auto spill paramters og til slutt legge den til video-container element. Legg merke til at vi også må sette inn cloud_name brukes til å laste opp videoen.
Når opplastet Cloudinary forvandler og trasncodes automatisk hver opplastet video til MP4, WebM og OGV som kreves av web- og mobilnettlesere, og også til FLV for flash.
Vi kunne forlate det slik, og det vil fungere, men jeg skal introdusere noen UI-transformasjon for å gi noe tilbakemelding om hva som skjer, og sett noen hjelpesignaler for senere transformasjoner. Inne i cloudinarydone tilbakeringing, under loadVideo Metode samtale, legg til følgende kode.
$ ('.help-block', $ ('# opplastingsfil') .parent ()) .hide (); $ ('.help-block', $ ('# video-bredde') .parent ()) .html ('Maks:' + data.result.width); $ ('.help-block', $ ('# video-høyde') .parent ()) .html ('Maks:' + data.result.height); $ ('# transform-controls') .slideDown (); Her setter vi bare noen hjelpesnor for å indikere størrelsen på den opplastede videoen som referanse. Deretter viser vi skjemaet med video transformasjon kontrollene.
Til slutt vil jeg introdusere en melding som indikerer at en videoopplasting pågår. Ved den avsluttende parentesen til cloudinarydone hendelse bindemiddel, legg til følgende kode.
.bind ("cloudinarystart", funksjon (e, data) $ ('.help-block', $ ('# opplastingsfil') .parent ()) .show (). html ('Opplasting ...'); $ ('# transform-kontroller') .hide ();); Denne brikken gir bare brukeren en liten tilbakemelding om hva som skjer bak kulissene og skjuler videoomformingskontrollene.
Så langt så bra-vi kan laste opp videoer og få dem vist i nettleseren med bare et par linjer med kode. Men nå for den virkelige moroa, la oss begynne å gjøre transformasjoner til våre videofiler bare ved å endre nettadressen vi bruker til å laste den.
De mest grunnleggende transformasjonene som vi kan lage med de opplastede videofilene, er å endre bredde og høyde og tilpasse hvordan beskjæringen skal utføres.
Det er fem parametere som styrer hvordan en videofil skal resizes og beskjæres:
Det er parametrene som brukes til å endre størrelse på en videofil. For ytterligere forklaring om hver enkelt, se den offisielle dokumentasjonen.
Det er to måter der Cloudinary utfører transformasjoner: lat og ivrig.
En lat transformasjon blir brukt on-the-fly når du ber om en opplastet fil. Første gang en transformert fil blir tilgjengelig, blir transformasjonen utført, og den resulterende filen blir cached for fremtidig bruk.
En ivrig transformasjon blir brukt når transformasjonene blir brukt på filen når den lastes opp, så når den er ferdig opplasting, er den omformede versjonen umiddelbart tilgjengelig..
Som et spesielt notat her, når du bruker en lat transformasjon for første gang, blir filen streamet ettersom transformasjonen oppstår, så i tilfelle av en videofil begynner den å spille med en gang mens transformasjonen er ferdig på fly.
Det er en API og flere SDKer for å få tilgang til alle Cloudinary-evnene, i dette eksempelet skal vi bruke jQuery-plugin-modulen for videotransformasjonene.
Så nå la vi implementere den nødvendige funksjonaliteten i vår søknad for å utføre og vise transformasjoner til våre videoer. Det første du må gjøre er å opprette en ny holder i vår kontroller for transformasjonsobjektet. Øverst på variabelenes deklarasjon, legg til følgende kode:
var transform = cloud_name: 'CLOUD_NAME';
Her setter vi inn cloud_name attributt til a endre stats motsette seg å angi resten av transformasjonsparametrene.
I loadVideo () metode, vi må erstatte $ .cloudinary.video andre parameter med den nye forvandle gjenstand.
$ ('# video-container') .html ($ ($ .cloudinary.video (public_id, transform)) .attr ('kontroller', 'kontroller') .attr ('autoplay', 'autoplay')); Det er alt forberedelsene vi trenger for å endre størrelsen på våre videofiler. Hvis du sjekker HTML-oppslaget, vil du være oppmerksom på at skjemaet som inneholder transformasjonsfeltene, anvender en anvendelsesmetode når det sendes inn. Vi kommer nå til å erklære den metoden, så på bunnen av kontrolleren legger du til følgende kode:
$ scope.update = function () var bredde = $ ('# video-bredde') .val (), høyde = $ ('# videohøyde') .val (), crop = $ = avgrensning]: valget (), tyngdekraften = $ ('input [navn = tyngdekraften]: merket') .val (), bakgrunn = $ ('# video-bakgrunn') .val (); transform.crop = crop; hvis (bredde) transform.width = width; hvis (høyde) transform.height = height; hvis (tyngdekraften) transform.gravity = gravity; hvis (bakgrunn) transform.background = background; loadVideo (); ; Denne metoden er litt lang, men hva det gjør er å lage hente transformasjonsparametrene introdusert i transformasjonsformen og angi passende parametere i det tidligere forvandle gjenstand.
Når vi oppdaterer videoen ved hjelp av transformasjonsskjemaet, vil loadVideo Metoden vil bli utført med det nye transformasjonsobjektet. Og videoen vil bli oppdatert.
Før vi går videre med de neste transformasjonene, må vi sørge for å tilbakestille forvandle objekt for hver opplastet fil, inne i cloudinarystart tilbakeringing, legg til følgende kode.
transform = cloud_name: 'CLOUD_NAME';
Her gjenoppretter vi bare forvandle motsette seg den opprinnelige tilstanden med bare cloud_name parameter sett.
En annen transformasjon som kan utføres er å rotere den streamede videoen. Akkurat som med resizing og cropping transformasjoner, kan vi bruke en av de tilgjengelige SDKene eller pluginene, eller vi kan bruke nettadressen til å angi rotasjonsparametrene. For jQuery-pluginet er parameteren for å rotere den genererte videoen vinkel.
Igjen må vi sette rotasjonsparameteren for forvandle objekt, inne i Oppdater metodedeklarasjon, like før loadVideo samtale legg til følgende kode.
varvinkel = $ (# videovinkel) .val (); hvis (vinkel) transform.angle = angle;
Med denne siste bunten kan vi nå utføre rotasjon til våre videoer ved hjelp av tranformation kontrollene slik at vi skulle rotere en video og endre størrelsen på den som følgende.
Det er mange andre transformasjoner som kan brukes på videofiler, inkludert video-transkoding, lydmanipulering, overleggstillatelse og GIF-transformasjon. For en komplett liste over tilgjengelige parametere, se den offisielle dokumentasjonen.
Vi vil gjerne gi en heldig, tilfeldig valgt leser, fire måneder fri for noen av våre av hylleplanene (du kan se våre planer her.
Bare tweet en lenke til dette innlegget ved hjelp av Twitter-delingsknappen som ligger på sidepanelet.
Når konkurransen er over, vil Cloudinary kontakte en heldig vinner tilfeldig og vil følge opp med deg for å kreve din premie.
I denne opplæringen utfører vi videoopplastinger og transformasjon ved hjelp av jQuery, men det finnes også mange andre SDK-er for å enkelt integrere alle applikasjoner med Cloudinary-tjenesten. Og alle transcoding og transformasjoner utføres på skyen uten å kreve ekstra programvare, noe som gjør tjenesten til en virkelig levedyktig og enkel løsning for mediehåndtering i mobil- og webapplikasjoner. For en komplett liste over alle tilgjengelige SDKer og plugins, se den offisielle dokumentasjonen.
Med Cloudinary kan vi håndtere bilder og videoer veldig enkelt og pålitelig. Det vil ta seg av å håndtere all lagring, optimalisering, transformasjon, caching og levering.
Alle transformasjoner og manipulering som utføres i opplæringen kan også gjøres ved hjelp av noen av de tilgjengelige SDKene og pluginene.
Legg igjen dine kommentarer, spørsmål, tanker og forslag i kommentarfeltet nedenfor.
