Share
In de huidige tutorial gaan we een eenvoudige webapplicatie maken om videomanipulatie voor het web aan te pakken, we zullen een videobestand naar de cloud uploaden en live transcodering en transformaties uitvoeren om een aangepast videobestand te maken om op te streamen elk apparaat. Hiervoor gaan we de Cloudinary-service gebruiken om video's op te slaan, te transcoderen, te transformeren en te streamen met in dit geval de beschikbare jQuery-plug-in.
"Ontwikkelt u een web- of mobiele applicatie? Met Cloudinary moet je je afbeeldingen beheren. "Dit is een fragment uit de About-pagina van de Cloudmediarite. En in deze zelfstudie, door het gebruik van echte voorbeelden en voor / na vergelijkingen, zullen we ontdekken dat dit niet alleen geldt voor afbeeldingen, maar ook voor video's.
In deze zelfstudie maken we een tool om video's te uploaden en te transformeren met behulp van de geüploade bestands-URL. We gaan alleen het JavaScript-gedeelte ontwikkelen om de videobestanden te uploaden en transformeren. Download de bijbehorende code om mee te volgen.
Ik denk dat we het er gerust over eens zijn dat afbeeldingen en video's een enorme impact hebben in het leven van vandaag, en afgezien van het gedoe met opslag en bezorging, hebben ontwikkelaars te maken met veel overhead voor bijvoorbeeld het weergeven van een video op een website of mobiel. apparaat. We moeten rekening houden met de grootte en het formaat van het bestand, of we het moeten streamen of downloaden, bestandsoptimalisatie en vele andere aspecten, en deze lijst gaat maar door wanneer we nieuwe doelen en bestanden toevoegen.
Ja, multimedia speelt een grote rol in de toepassingen van vandaag, zowel internet als mobiel, maar dit zou niet het geval moeten zijn in de ontwikkelingstijd. Bij het maken van een nieuwe toepassing moeten we ons kunnen concentreren op het doel ervan, en geen tijd verspillen met het gedoe van opslag en optimalisatie van multimediabestanden. En dit is precies waar Cloudinary te hulp komt.
Cloudinary is een SaaS (Software as a Service) die alle taken met betrekking tot beeld- en videomanipulatie behandelt, zoals uploaden, opslaan, optimaliseren, leveren en zelfs vele andere functies biedt, zoals beeldtransformatie, bijsnijden, schalen en gezichtsherkenning . En alle transformaties en transcoderingen worden in realtime en on-the-fly uitgevoerd. Cloudinary gebruikt Amazon S3 voor bestandsopslag en integreert met toonaangevende Content Delivery Networks, zoals Akamai, om zeer efficiënte levering te bieden.
Om mee te kunnen doen heeft u een Cloudinary-account nodig om videobestanden te uploaden en transformaties uit te voeren, ga je gang en maak je een gratis account aan.
Maar dat is genoeg praatjes. Laten we onze handen vies maken en enkele echte voorbeelden laten zien van wat we kunnen doen.
In elke toepassing die afbeeldingen en video's gebruikt om gebruikers te betrekken, is de eerste taak waarvoor we moeten zorgen bestandsuploads. Volg de tutorial en maak een gratis account.
Om bestanden naar een Cloudinary-account te uploaden, moeten de verzoeken een handtekening op verzoek hebben, gebaseerd op uw API-sleutel en geheim. Er zijn echter gevallen waarin u het uploaden van bestanden rechtstreeks vanuit de browser moet ondersteunen, zonder de gegevens naar de back-end te hoeven sturen om het verzoek te ondertekenen en de bestanden te uploaden, en dit is waar Directe upload zonder upload vindt plaats.
Om het in te schakelen, in uw Accountconsole navigeren naar Instellingen> Uploaden.
Onderaan de pagina vindt u een Voorinstellingen uploaden instellen en de Schakel niet-ondertekend uploaden in keuze. We moeten het selecteren zodat onze applicatie bestanden kan uploaden zonder de verzoeken te hoeven ondertekenen. Hiermee wordt een nieuwe uploadvoorinstelling gemaakt waarvoor niet-ondertekende uploads zijn ingeschakeld. Noteer de naam van de voorinstelling, want die gebruiken we zo meteen.
Dat is het voor het configuratiedeel. Vervolgens gaan we het daadwerkelijke uploaden van het bestand uitvoeren en daarvoor zullen we de jQuery-plug-in van Cloud gebruiken. Ga naar de downloadpagina en download deze.
Om het te laten werken, moeten we ook jQuery hebben en voor directe uploads van de browser hebben we ook afhankelijkheden nodig van de plug-in jQuery File Upload. Deze afhankelijkheden komen al met de Cloudinary-plug-in.
Om een bestand rechtstreeks vanuit de browser te uploaden, is het enige wat u hoeft te doen, Cloudist inschakelen in het bestandsinvoerveld, zoals zo.
Accentsconagua
$ ('.upload-bestand') .unsigned_cloudinary_upload ('UPLOAD_PRESET', cloud_name: 'CLOUD_NAME', tags: 'UPLOAD_TAGS'); De UPLOAD_PRESET parameter is de naam van de voorinstelling waarin de Directe, niet-ondertekende uploads zijn ingeschakeld, degene die in de vorige stap is gemaakt. De cloudnaam is een naam die is toegewezen aan alle gebruikers in het cloud-systeem. Dit wordt verkregen bij het maken van een account en wordt weergegeven in het dashboard van de gebruiker. Ten slotte is het veld Tags optioneel en kunt u een speciaal label instellen om aan te geven dat een bestand rechtstreeks vanuit de browser is geüpload.
Na het uploaden van een videobestand, moeten we het nu naar onze gebruikers streamen. De service zorgt voor optimalisatie en caching van het bestand voor een snelle levering. Voeg in onze controller-methode een aantal houders toe om de bron, de naam en het volledige pad van de geüploade video op te slaan.
var public_id = ";
Om vervolgens onze videovoorvertoning weer te geven zodra het bestand is geüpload, gaan we een gebeurtenislistener binden aan de unsigned_cloudinary_upload noemen. Na het sluitende haakje de volgende code toevoegen.
.bind ('cloudinarydone', functie (e, data) public_id = data.result.public_id; $ ('.video-title') .html (data.result.original_filename); loadVideo ();); Ten slotte moeten we de loadVideo methode die zorgt voor het instellen van de HTML5-videotagbron en deze opnieuw laadt. Binnen de regelaarfunctie, definieer een nieuwe loadVideo methode:
loadVideo = function () $ ('# video-container') .html ($ ($ .cloudinary.video (public_id, cloud_name: 'CLOUD_NAME')) .attr ('controls', 'controls') .attr ('autoplay', 'autoplay')); ; Hier gebruiken we de jQuery-plugin van Cloudinary om de videotag van de geüploade video te maken. Zodra het HTML-element is gemaakt, voegen we de controls en automatisch afspelen paramters en voeg het uiteindelijk toe aan de Video-container element. Merk op dat we ook de cloud_name gebruikt om de video te uploaden.
Bij het uploaden transformeert en transcribeert Cloudinary automatisch elke geüploade video naar MP4, WebM en OGV die vereist zijn door web- en mobiele browsers, en ook naar FLV voor flash.
We kunnen het zo laten en het zal werken, maar ik ga een aantal UI-transformatie introduceren om wat feedback te geven over wat er gebeurt en een aantal hulp-aanwijzingen voor latere transformaties in te stellen. Binnen in de cloudinarydone terugbellen, onder de loadVideo method call, voeg de volgende code toe.
$ ('.help-block', $ ('# upload-bestand') .parent ()) .hide (); $ ('.help-block', $ ('# video-width') .parent ()) .html ('Max:' + data.result.width); $ ('.help-block', $ ('# video-height') .parent ()) .html ('Max:' + data.result.height); $ ('# transform-controls') .slideDown (); Hier stellen we slechts enkele helperstrings in om de grootte van de geüploade video aan te geven als referentie. Vervolgens geven we het formulier weer met de besturingselementen voor videotransformatie.
Ten slotte wil ik een bericht introduceren dat aangeeft dat een video wordt geüpload. Aan het sluitingshaakje van de cloudinarydone gebeurtenisbinder, voeg de volgende code toe.
.bind ('cloudinarystart', functie (e, data) $ ('.help-block', $ ('# upload-bestand') .parent ()) .show (). html ('Uploaden ...'); $ ('# transform-controls') .hide ();); Dit fragment geeft de gebruiker een klein beetje feedback over wat er achter de schermen gebeurt en verbergt de bedieningselementen voor videotransformatie.
Tot zover goed - we kunnen video's uploaden en deze in de browser laten weergeven met slechts een paar regels code. Maar nu, voor het echte plezier, laten we beginnen met het maken van transformaties in onze videobestanden door gewoon de URL te wijzigen die we gebruiken om het te laden.
De meest basale transformaties die we kunnen maken met de geüploade videobestanden zijn om de breedte en hoogte te wijzigen en aan te passen hoe het bijsnijden moet worden uitgevoerd.
Er zijn vijf parameters die bepalen hoe een videobestand wordt aangepast en bijgesneden:
Dat zijn de parameters die worden gebruikt om het formaat van een videobestand te wijzigen. Raadpleeg de officiële documentatie voor meer uitleg over elk exemplaar.
Er zijn twee manieren waarop Cloudinary transformaties uitvoert: lui en gretig.
Een luie transformatie wordt on-the-fly toegepast bij het aanvragen van een geüpload bestand. De eerste keer dat een getransformeerd bestand wordt geopend, wordt de transformatie uitgevoerd en wordt het resulterende bestand opgeslagen in de cache voor toekomstig gebruik.
Een gretige transformatie wordt toegepast wanneer de transformaties worden toegepast op het bestand terwijl het wordt geüpload, dus wanneer het klaar is met uploaden, is de getransformeerde versie onmiddellijk beschikbaar.
Als een speciale opmerking, wanneer u voor het eerst een luie transformatie toepast, wordt het bestand gestreamd terwijl de transformatie plaatsvindt, dus in het geval van een videobestand begint het meteen te spelen terwijl de transformatie on-the-fly wordt uitgevoerd.
Er is een API en meerdere SDK's voor toegang tot alle Cloudinary-mogelijkheden, in dit voorbeeld gaan we de jQuery-plug-in gebruiken voor de videotransformaties.
Dus laten we nu de noodzakelijke functionaliteit in onze applicatie implementeren om transformaties naar onze video's uit te voeren en weer te geven. Het eerste wat u moet doen is een nieuwe houder in onze controller maken voor het transformaties-object. Voeg de volgende code toe bovenaan de verklaring van variabelen:
var transform = cloud_name: 'CLOUD_NAME';
Hier stellen we de cloud_name attribuut aan a tranform object om de rest van de transformatieparameters in te stellen.
In de loadVideo () methode, moeten we de $ .cloudinary.video tweede parameter met de nieuwe transformeren voorwerp.
$ ('# video-container') .html ($ ($ .cloudinary.video (public_id, transform)) .attr ('controls', 'controls') .attr ('autoplay', 'autoplay')); Dat is al de voorbereiding die we nodig hebben om onze videobestanden te verkleinen. Als u de HTML-opmaak controleert, ziet u dat het formulier met de transformatievelden een scopemethode oproept bij verzending. We gaan die methode nu declareren, dus voeg onderaan de controller de volgende code toe:
$ scope.update = function () var width = $ ('# video-width') .val (), height = $ ('# video-height') .val (), crop = $ ('input [naam = bijsnijden]: aangevinkt ') .val (), zwaartekracht = $ (' invoer [naam = zwaartekracht]: aangevinkt ') .val (), achtergrond = $ (' # video-achtergrond ') .val (); transform.crop = bijsnijden; if (breedte) transform.width = width; if (hoogte) transform.hoogte = hoogte; if (zwaartekracht) transform.gravity = gravity; if (achtergrond) transform.background = background; loadVideo (); ; Deze methode is enigszins lang, maar wat het doet, is om de transformatieparameters in het transformatiesformulier op te halen en de juiste parameters in de vorige transformeren voorwerp.
Wanneer we de video bijwerken met behulp van het transformatieformulier, de loadVideo methode wordt uitgevoerd met het nieuwe transformatieobject. En de video zal worden bijgewerkt.
Voordat we verdergaan met de volgende transformaties, moeten we ervoor zorgen dat we de transformeren object voor elk geupload bestand, binnen de cloudinarystart callback, voeg de volgende code toe.
transform = cloud_name: 'CLOUD_NAME';
Hier zijn we alleen de transformeren bezwaar tegen de initiële status met alleen de cloud_name parameterset.
Een andere transformatie die kan worden uitgevoerd, is het roteren van de gestreamde video. Net als bij transformaties voor het wijzigen van de grootte en bijsnijden, kunnen we een van de beschikbare SDK's of plug-ins gebruiken, of we kunnen de URL gebruiken om de rotatieparameters in te stellen. Voor de plug-in jQuery is de parameter om de gegenereerde video te roteren hoek.
We moeten opnieuw de rotatieparameter instellen voor transformeren object, binnen de bijwerken methode verklaring, vlak voor de loadVideo oproep voeg de volgende code toe.
var angle = $ (# video-angle) .val (); if (hoek) transform.angle = hoek;
Met dit laatste fragment kunnen we nu rotatie naar onze video's uitvoeren met behulp van de besturingselementen voor tranformatie, zodat we een video zouden moeten roteren en de grootte ervan wijzigen zoals het volgende.
Er zijn veel andere transformaties die kunnen worden toegepast op videobestanden, waaronder video-transcodering, audiomanipulatie, overlay-toevoeging en GIF-transformatie. Raadpleeg de officiële documentatie voor een volledige lijst met beschikbare parameters.
We geven je graag een gelukkige, willekeurig gekozen lezer, vier maanden gratis voor al onze standaardplannen (je kunt onze plannen hier zien.
Eenvoudig een tweet een link naar dit bericht met behulp van de knop Twitter delen op de zijbalk.
Zodra de wedstrijd voorbij is, neemt Cloudinary willekeurig contact op met een gelukkige winnaar en neemt hij / zij contact met u op om uw prijs te claimen.
In deze zelfstudie voeren we video-uploads en transformatie uit met behulp van jQuery, maar er zijn ook veel andere SDK's om elke toepassing eenvoudig te integreren met de Cloudinary-service. En alle transcodering en transformaties worden uitgevoerd op de cloud zonder dat er extra software nodig is, dit maakt de service een echt haalbare en eenvoudige oplossing voor mediamanipulatie in mobiele en webapplicaties. Raadpleeg de officiële documentatie voor een volledige lijst van alle beschikbare SDK's en plug-ins.
Met Cloudinary kunnen we afbeeldingen en video's heel gemakkelijk en betrouwbaar verwerken. Het zorgt voor de afhandeling van alle opslag, optimalisatie, transformatie, caching en levering.
Alle transformaties en manipulaties die in de zelfstudie worden uitgevoerd, kunnen ook worden gedaan met behulp van een van de beschikbare SDK's en plug-ins.
Laat uw opmerkingen, vragen, gedachten en suggesties achter in de opmerkingen hieronder.
