, klogere video behandling med cloudinary,,,,, 44,,,,,,,,, 8,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, der sponsoreres indhold, denne støttes efter træk et produkt af relevans for vores læsere, mens vores leder, retningslinjer for at være objektive og uddannelse. i den nuværende tutor vil vi skabe en enkel webapplikationen klare video manipulation med nettet, vil vi få en video. fil til skyer og optræde live transcoding og forandringer, på et fly til skabt en skræddersyet video - fil til strøm på enhver anordning.til dette skal vi bruge cloudinary tjeneste opbevarer, transcode, transform og strøm videoer med i dette tilfælde til rådighed jquery stik af. "er du udvikler en web - eller mobile ansøgning?cloudinary er, hvordan du skal styre jeres billeder. "det er et uddrag fra cloudinary websted om side.og i denne forelæsning, gennem anvendelse af virkelige eksempler og før /efter sammenligninger, vil vi finde ud af, at dette gælder ikke kun for billeder, men for videoer, som  .,, i denne forelæsning vil vi skabe et redskab til at uploade og omdanne videoer med uploadet fil url.vi er kun vil udvikle javascript del til at uploade og omdanne det videofiler.download den ledsagende kode til at følge med.,, udfordringer, når det drejer sig om multimedier, tror jeg, at vi kan sikkert enig i, at billeder og video - har en enorm indflydelse på i dag, er livet, og desuden besværet af håndtering, oplagring og levering, vi udviklere har at gøre med en masse op for, sige, at vise en video på en websted eller mobilt udstyr.vi er nødt til at tage højde for størrelsen og formen af den fil, om vi ikke burde stream eller downloade, fil optimering og mange andre aspekter, og listen bliver bare ved og ved, hvornår vi tilføje nye mål og filer, ja, multimedie - spiller en stor rolle i dagens ansøgninger om webbaserede eller mobile men det burde ikke være tilfældet i udvikling.ved at skabe en ny ansøgning, skal vi være i stand til at koncentrere sig om sine formål og ikke spilde tiden med besvær for oplagring og optimering af multimedie - filer.og det er netop her, cloudinary kommer til undsætning.,, cloudinary er et stabiliserings - og associeringsaftaler (software som en tjenesteydelse), der tager sig af alle de opgaver, der er forbundet med billeder og video manipulation, såsom upload, oplagring, optimering, levering, og selv om mange andre elementer, som f.eks. billede, omdannelse, planteavl, afskalning, og påvisning.og alle forandringer og transcoding udføres i realtid og om at flyve.cloudinary bruger amazon s3 for arkivet og integrerer med ledende indhold omdelingsnet, f.eks. akamai at tilbyde effektiv levering., med henblik på at følge med, du får brug for en cloudinary hensyn til at uploade videofiler og foretage ændringer, gå videre og skabe en fri højde.,, direkte browser uploader, men det er nok chit - snak, lad os få beskidte hænder og vise nogle eksempler på, hvad vi kan gøre., i en ansøgning, der anvender billeder og video at inddrage brugerne, den første opgave, vi har, til at tage sig af er fil sender.for at følge med den lektion, gå videre og skabe en fri højde.,, gøre det muligt at foretage direkte ikke underskrevet uploader, at uploade filer til et cloudinary hensyn til de anmodninger, skal have en anmodning signatur, der er baseret på deres api - nøgle og hemmelige.men der er tilfælde, hvor du er nødt til at støtte uploader filerne direkte fra browser, uden at sende oplysninger til sidst at underskrive anmodningen og uploade filen, og det er her, direkte ikke underskrevet, upload, finder sted, for at den i din konto kan navigere, indstillinger > upload,.,, på bunden af den side, du vil finde en, upload stationer, fastsættelse og muliggøre ikke underskrevet uploader mulighed.vi er nødt til at vælge den, således at vores ansøgning kan uploade dokumenter uden at skulle underskrive anmodninger.dette vil skabe en ny uploade nulstillet, som ikke har underskrevet uploader er aktiveret.tag en seddel med forudindstillede navn, som vi vil bruge den i et øjeblik.,,,, uploade filen, og det er det for konfiguration.det næste, vi skal udføre den faktiske overførsel af sagen, og til, at vi vil bruge cloudinary er jquery stik af.gå til download side og downloade det, for at få det til at virke, må vi også have jquery og uploader direkte browser, har vi også brug for nogle områder fra jquery fil. stik af.disse områder er allerede kommet med cloudinary stik af.,, at uploade filen direkte fra browser, det eneste du skal gøre, er at give cloudinary i filen input - område, som så. $(. uploade filen '). unsigned_cloudinary_upload (' upload_preset "(cloud_name:" cloud_name, mærker: "upload_tags'});,,, upload_preset parameter er navnet på den fastsatte, hvor direkte ikke underskrevet, overfører, er aktiveret, den, der er opstået i det foregående trin.den sky navn er et navn, som alle brugere i cloudinary system.dette er opnået ved at oprette en konto og vises i brugerens instrumentbræt.endelig mærker område er fakultativ, og du kan sætte et særligt mærke til angivelse af, at en sag blev overført fra browser direkte.,, strøm uploadet videoen, efter at uploade en videofil, er vi nu nødt til at sende det til vores brugere.den ydelse, der skal tage sig af at optimere og caching filen for hurtig levering.i vores registeransvarlige metode, tilføje et par indehavere opbevarer den kilde, navn og fulde vej af uploadet videoen, var public_id = '«, og for at vise vores video forpremiere, når sagen er uploadet, vi skal binde en begivenhed til at lytte til det, unsigned_cloudinary_upload, ring.efter den afsluttende parentes vedlægge følgende kode.,,. bind ('cloudinarydone, funktion (e data) (public_id = data.result.public_id. $(. video afsnit). http: //(data.result.original_filename); loadvideo().}), endelig er vi nødt til at definere, loadvideo, metode, der vil passe fastsættelse af den html5 video - kilde og lade det.indenfor den registeransvarlige funktion, definere en ny, loadvideo, metode:,, loadvideo = funktion () ($('# video beholder). http: //($($. cloudinary. video (public_id, (cloud_name: "cloud_name'}). attr (" kontrol "," kontrol "). attr ('autoplay", "autoplay')}, er vi her ved hjælp af cloudinary er jquery stik af at skabe den video - de har uploadet videoen, når html element er skabte vi indgå, kontrol og autoplay, paramters og endelig det, video - container, element.bemærk, at vi skal også fastsætte, cloud_name, anvendes til at uploade video.,, når uploadet cloudinary automatisk omstilling og trasncodes hver uploadet videoen til mp4, webm og ogv, der kræves af web - og mobile browsere og også flyver til flash., kunne vi lade det blive ved det, og det vil fungere, men jeg kommer til at indføre en eu - erhvervsgrenen omdannelse til at give tilbagemeldinger om, hvad der sker, og sæt nogle hjælper referencer til senere forandringer.i, cloudinarydone, callback under, loadvideo, metode, tilføje følgende kode. $(. hjælpe blok, $('# uploade filen'). parent()). hide(). $(. hjælpe blok, $('# video bredde). parent()). http: //(- + data.result.width); $(. hjælpe blok, $('&#video højde). parent()). http: //(max.: + data.result.height); $('# omdanne kontrol). slidedown();, er vi her blot nogle hjælper tråde for at angive størrelse af uploadet videoen som reference.så er vi der form med videoen omdannelse kontrol. endelig vil jeg præsentere en meddelelse om, at en video, uploade er i gang.på den afsluttende parentes af, cloudinarydone, begivenhed bindemiddel, tilføje følgende kode.,,. bind ('cloudinarystart, funktion (e data) ($(. hjælpe blok, $('&#uploade filen '). parent()). show(). html ("uploader..."); $('&#omdanne kontrol). hide().}), dette indlæg giver brugeren en smule feedback om, hvad der foregår bag kulisserne og gemmer den video omdannelse kontrol.,, video - manipulation, så langt, så godt vi kan uploade videoer og de vises i browseren, med bare et par linjer kode.men nu til det sjove, lad os begynde at lave forandringer i vores videofiler, bare ved at ændre url, vi bruger til at laste det.,, nedskæringer og afgrøder, de mest grundlæggende ændringer, som vi kan gøre med uploadet videofiler skal ændre bredde og højde og vælge, hvordan de afgrøder skal udføres.,, der er fem parametre, der kontrollerer, hvordan en videofil, vil blive ændret, og det dukkede:,,, bredde: den bredde, som den nye video skal have.url parameter, w. højde: den højde, den nye video skal have.url parameter, h,.,, afgrøde: hvordan), hvis der er nogen, der skal gøres, når reduktionen af videoen.der er flere muligheder:, omfanget, fyld, egnet, begrænse, blok, lpad, afgrøde.alle disse sig cloudinary, hvordan resize videoen.hvis for eksempel en grænse er fastsat, den nye video vil have en maksimal bredde på, bredde, og en maksimal højde af, højde, samtidig med at det oprindelige omfang.url parameter, c,.,, tyngdekraft,: denne parameter angiver den del af videoen til anvendelse, når afgrøde, er fastsat til afgrøde, blok, og fyld.ligesom med afgrøder, er der adskillige muligheder for at sætte for denne parameter:, north_west, nord, north_east, vest, øst, syd - south_west,, south_east,.man kan forestille sig, at det henviser til venstre, højre, top og bund.for eksempel, med angivelse af, north_west, vil betyde, at den øverste venstre del af den oprindelige video, hvor dyrkning.url parameter, g,.,, baggrund,: denne ejendom, angiver den farve til anvendelse, når de har forvandlet video polstring.når du sætter bredde og højde egenskaber og den oprindelige sag bevarer sine andele, polstring, vil blive brugt til at fylde den horisontale eller vertikale huller, der genereres og med baggrund, kan du sætte farve til brug for at udfylde.her kan de angive farven som en streng (rød), eller som en tre - eller seks karakter rgb - kode.for at bruge rgb - kode, du har brug for at præcisere det i url, som så:, rgb: ff0000,.url parameter, b,.,, det er de parametre, der anvendes til at resize en video fil.for yderligere oplysninger om hver enkelt, henviser til den officielle dokumentation,.,, der er to måder, hvorpå cloudinary udfører forandringer: lazily og ivrigt.,, en doven transformation anvendes i luften, når de anmoder om en uploadet fil.første gang en ændret dossier er tilgængelige, der er udført, og den deraf følgende akter vil blive skjult til fremtidig brug.,, en ivrig transformation anvendes, når de forandringer, anvendes på de sagsakter, som den uploader, så når det er slut, uploade ændret udgave er umiddelbart tilgængelige.,, som en særlig bemærkning her. når man anvender en doven omdannelse for første gang, filen er vist som omdannelsen sker, så i tilfælde af en video - fil, der begynder at spille lige væk, mens der er gjort på flyve.,, der er en api - og flere sdks adgang til alle de cloudinary kapacitet i det eksempel, vi bruger jquery stik af til videoen forandringer.,, så lad os nu implement den nødvendige funktionalitet i vores anvendelse til at udføre og vise forandringer til vores videoer.den første ting at gøre, er at skabe en ny indehaver i vores tilsynsførende for forandringer objekt.på toppen af variablerne erklæring, tilføje følgende kode:,, var omdanne = {cloud_name: "cloud_name '}, er vi her om, cloud_name, tillægger en, tranform, genstand for resten af omdannelsesparametre., i, loadvideo(), metode, er vi nødt til at i stedet for $. cloudinary.video, andet parameter med nye, transformere, objekt. $('&#video beholder). http: //($($. cloudinary. video (public_id, omdanne)). attr (" kontrol "," kontrol "). attr ('autoplay", "autoplay"), det er alle forberedelserne, vi har brug for for at resize vores videofiler.hvis du tjekker html oveni, vil de konstatere, at den form, som indeholder omdannelse områder påberåber sig en anvendelsesområde metode, når de forelægges.vi er nu ved at erklære, at den metode, der så på bunden af den registeransvarlige tilføje følgende kode:,, $scope.update = funktion () (var - bredde = $('# video bredde). val(), højde = $('&#video højde). val() crop = $("input - navn = afgrøde]: kontrolleret). val(), tyngdekraft = $('input = alvor [navn]: kontrolleret). val(), baggrund = $('&#video baggrund"). val(); transform.crop = afgrøde, hvis (bredde) (transform.width = bredde;} hvis (højde) (transform.height = højde;} hvis (alvorlige) (transform.gravity = tyngdekraften.} hvis (baggrund) (transform.background = baggrund;} loadvideo();};,, this metode er temmelig lang, men det, det gør, er at skabe hente omdannelsesparametre, der blev indført i de forandringer, form og de relevante parametre i den tidligere, transformere, objekt.,, når vi ajourføre den video med omdannelsen form, loadvideo, metode, vil blive gennemført med den nye ændring objekt.og videoen vil blive ajourført,.,,,,, før man går videre til den næste forandringer, skal vi sikre, at nulstille, transformere, genstand for hver uploadet fil, indenfor, cloudinarystart, callback, tilføje følgende kode.,, omdanne = {cloud_name: "cloud_name '}, er vi her der er kun endnu en gang om, at ændre, gøre indsigelse mod den oprindelige medlemsstat, kun med det, cloud_name parameter,.,, video - rotation, en ændring, der kan udføres, er at skifte streamet video.ligesom med nedskæring og planteavl forandringer, vi kan bruge en af de til rådighed sdks eller plugins, eller vi kan bruge adressen til den drejning parametre.for jquery stik af den parameter, der roterer den video, vinkel,.,, vi har endnu en gang at fastsætte rotation parameter til at omdanne, genstand, indenfor, ajourføre, metode erklæring, lige før, loadvideo, tilføje følgende kode.,, var vinkel = $(# video vinkel). val(); hvis (vinkel) (transform.angle = vinkel.}, med dette sidste indlæg, vi nu kan udføre rotation til vores videoer med tranformation kontrol, så det, vi var at skifte en video og resize det følgende.,,,, ekstra forandringer, er der mange andre ændringer, der kan anvendes på video dokumenter, herunder video transcoding, audio - manipulation, - overlay - at tilføje, og gif forvandling.for en fuldstændig liste over parametre, der er til rådighed, henviser til den officielle dokumentation,.,, sild, vi vil være glad for at give læseren en heldig, tilfældigt udvalgt fire måneder fri for ethvert af vores ned fra hylden planer (du kan se vores planer her.,, blot tweet en forbindelse til denne post benytter twitter - deling af knap er placeret på den konference.,, når konkurrencen er ovre, cloudinary vil kontakte en heldig vinder ved stikprøver og opfølgning med dig for at få din gevinst.,, konklusion i denne forelæsning, vi udfører video uploader og omdannelse af jquery, men der er også en masse andre sdks let at integrere alle anvendelse af cloudinary tjeneste.og alle de transcoding og omdannelser udføres på sky, uden at det kræver yderligere software, det gør tjeneste, en virkelig bæredygtig og enkel løsning for manipulerede medier i mobile og web - applikationer.en fuldstændig liste over alle tilgængelige sdks og plugins henviser til den officielle dokumentation., med cloudinary, vi kan klare billeder og video, meget hurtigt og pålideligt.det vil tage sig af at håndtere alle oplagring, optimering, omdannelse, caching og levering, alle de forandringer og manipulation udført i tutor kan også gøres ved hjælp af nogen af de tilgængelige sdks og plugins.,, lad dine kommentarer, spørgsmål, tanker og forslag i bemærkningerne nedenfor.