Share
Nel presente tutorial creeremo una semplice applicazione web per gestire la manipolazione video per il web, caricheremo un file video sul cloud ed eseguiremo transcodifiche e trasformazioni in tempo reale per creare un file video personalizzato da trasmettere in streaming qualsiasi dispositivo. Per questo useremo il servizio Cloudinary per archiviare, transcodificare, trasformare e trasmettere video usando in questo caso il plugin jQuery disponibile.
"Stai sviluppando un'applicazione web o mobile? Cloudinary è il modo in cui dovresti gestire le tue immagini. "Questo è un estratto tratto dalla pagina About del sito Web di Cloudinary. E in questo tutorial, attraverso l'uso di esempi reali e confronti prima / dopo, scopriremo che questo non è solo vero per le immagini, ma anche per i video.
In questo tutorial creeremo uno strumento per caricare e trasformare video utilizzando l'URL del file caricato. Svilupperemo solo la parte JavaScript per caricare e trasformare i file video. Scarica il codice allegato per seguirlo.
Penso che possiamo tranquillamente concordare sul fatto che le immagini e i video abbiano un impatto enorme nella vita di oggi, e oltre al problema di gestire lo stoccaggio e la consegna, gli sviluppatori devono affrontare un sacco di spese generali per, ad esempio, la visualizzazione di un video su un sito Web o un dispositivo mobile dispositivo. Dobbiamo tenere in considerazione la dimensione e il formato del file, indipendentemente dal fatto che dovremmo eseguire lo streaming o il download, l'ottimizzazione dei file e molti altri aspetti, e questa lista va avanti e avanti quando aggiungiamo nuovi obiettivi e file.
Sì, la multimedialità svolge un ruolo enorme nelle applicazioni di oggi, sia su base web che mobile, ma non dovrebbe essere il caso nei tempi di sviluppo. Quando creiamo una nuova applicazione, dobbiamo essere in grado di concentrarci sul suo scopo e non perdere tempo con la seccatura di archiviazione e ottimizzazione dei file multimediali. Ed è proprio qui che Cloudinary viene in soccorso.
Cloudinary è un SaaS (Software as a Service) che gestisce tutte le attività relative alla manipolazione di immagini e video, come il caricamento, l'archiviazione, l'ottimizzazione, la consegna e persino la fornitura di molte altre funzionalità come trasformazione dell'immagine, ritaglio, ridimensionamento e rilevamento dei volti . E tutte le trasformazioni e la transcodifica vengono eseguite in tempo reale e al volo. Cloudinary utilizza Amazon S3 per lo storage di file e si integra con le principali reti di Content Delivery, come Akamai per offrire consegne molto efficienti.
Per seguirti avrai bisogno di un account Cloudinary per caricare file video ed eseguire trasformazioni, andare avanti e creare un account gratuito.
Ma è abbastanza chiacchierona, mettiamoci le mani sporche e mostriamo alcuni esempi reali di ciò che possiamo fare.
In qualsiasi applicazione che utilizza immagini e video per coinvolgere gli utenti, il primo compito di cui ci dobbiamo occupare è il caricamento dei file. Per seguire il tutorial, vai avanti e crea un account gratuito.
Per caricare i file su un account Cloudinary, le richieste devono avere una firma di richiesta basata sulla chiave API e sul segreto. Tuttavia, ci sono casi in cui è necessario supportare il caricamento di file direttamente dal browser, senza dover inviare i dati al back-end per firmare la richiesta e caricare i file, ed è qui che Caricamento diretto senza firma ha luogo.
Per abilitarlo, nel tuo Account Console navigare verso Impostazioni> Carica.
In fondo alla pagina troverai un Carica i preset impostazione e il Abilita il caricamento non firmato opzione. Dobbiamo selezionarlo in modo che la nostra applicazione possa caricare i file senza dover firmare le richieste. Ciò creerà una nuova preimpostazione di caricamento per cui sono abilitati i caricamenti non firmati. Prendi nota del nome preimpostato poiché lo useremo in un attimo.
Questo è tutto per la parte di configurazione. Successivamente eseguiremo l'effettivo caricamento del file, e per questo utilizzeremo il plugin jQuery di Cloudinary. Vai alla pagina di download e scaricala.
Per funzionare, dobbiamo anche avere jQuery, e per i caricamenti diretti del browser abbiamo bisogno anche di alcune dipendenze dal plugin di caricamento file jQuery. Queste dipendenze sono già fornite con il plugin Cloudinary.
Per caricare un file direttamente dal browser, l'unica cosa che devi fare è abilitare Cloudinary nel campo di input del file in questo modo.
Accentsconagua
$ ('.upload-file') .unsigned_cloudinary_upload ('UPLOAD_PRESET', cloud_name: 'CLOUD_NAME', tag: 'UPLOAD_TAGS'); Il UPLOAD_PRESET parametro è il nome del preset in cui il Caricamenti diretti non firmati sono abilitati, quello creato nel passaggio precedente. Il nome cloud è un nome assegnato a tutti gli utenti nel sistema Cloudinary. Questo si ottiene quando si crea un account e viene visualizzato nella dashboard dell'utente. Infine, il campo Tag è facoltativo e puoi impostare un tag speciale per indicare che un file è stato caricato direttamente dal browser.
Dopo aver caricato un file video, ora abbiamo bisogno di trasmetterlo ai nostri utenti. Il servizio si occuperà dell'ottimizzazione e della memorizzazione nella cache del file per una consegna rapida. Nel nostro metodo di controller, aggiungi un paio di supporti per memorizzare la fonte, il nome e il percorso completo del video caricato.
var public_id = ";
Quindi, per visualizzare la nostra anteprima video una volta che il file è stato caricato, legheremo un listener di eventi al file unsigned_cloudinary_upload chiamata. Dopo la parentesi di chiusura, aggiungere il seguente codice.
.bind ('cloudinarydone', function (e, data) public_id = data.result.public_id; $ ('.video-title') .html (data.result.original_filename); loadVideo ();); Infine dobbiamo definire il loadVideo metodo che si occuperà di impostare l'origine del tag video HTML5 e ricaricarlo. All'interno della funzione controller, definire un nuovo loadVideo metodo:
loadVideo = function () $ ('# video-container') .html ($ ($ .cloudinary.video (public_id, cloud_name: 'CLOUD_NAME')) .attr ('controls', 'controls') .attr ('autoplay', 'autoplay')); ; Qui stiamo usando il plugin jQuery di Cloudinary per creare il tag video del video caricato, una volta creato l'elemento HTML aggiungiamo il controlli e riproduzione automatica paramters e infine aggiungilo al Video-container elemento. Si noti che dobbiamo anche impostare il cloud_name usato per caricare il video.
Quando viene caricato, Cloudinary trasforma e trascrive automaticamente ogni video caricato su MP4, WebM e OGV richiesti dai browser Web e mobili e anche su FLV per flash.
Potremmo lasciarlo così e funzionerà, ma introdurrò alcune trasformazioni dell'interfaccia utente per dare un feedback su ciò che sta accadendo e impostare alcuni suggerimenti per le trasformazioni successive. Dentro il cloudinarydone callback, sotto il loadVideo chiamata al metodo, aggiungere il seguente codice.
$ ('.help-block', $ ('# upload-file') .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 (); Qui stiamo semplicemente impostando alcune stringhe di aiuto per indicare la dimensione del video caricato come riferimento. Quindi stiamo visualizzando il modulo con i controlli di trasformazione video.
Infine, voglio introdurre un messaggio che indica che è in corso il caricamento di un video. Alla parentesi chiusa del cloudinarydone raccoglitore di eventi, aggiungere il seguente codice.
.bind ('cloudinarystart', function (e, data) $ ('.help-block', $ ('# upload-file') .parent ()) .show (). html ('Caricamento in corso ...'); $ ('# transform-controls') .hide ();); Questo frammento fornisce all'utente solo un piccolo feedback su ciò che accade dietro le quinte e nasconde i controlli di trasformazione video.
Fin qui tutto bene, possiamo caricare video e visualizzarli nel browser con solo un paio di righe di codice. Ma ora, per il vero divertimento, iniziamo a fare le trasformazioni nei nostri file video semplicemente modificando l'URL che usiamo per caricarlo.
Le trasformazioni più basilari che possiamo fare con i file video caricati sono di modificare la larghezza e l'altezza e personalizzare come deve essere eseguito il ritaglio.
Esistono cinque parametri che controllano il modo in cui un file video verrà ridimensionato e ritagliato:
Quelli sono i parametri utilizzati per ridimensionare un file video. Per ulteriori spiegazioni su ciascuno di essi, fare riferimento alla documentazione ufficiale.
Ci sono due modi in cui Cloudinary esegue le trasformazioni: pigramente e avidamente.
Una trasformazione pigra viene applicata al volo quando si richiede un file caricato. La prima volta che si accede a un file trasformato, viene eseguita la trasformazione e il file risultante verrà memorizzato nella cache per l'utilizzo futuro.
Una trasformazione entusiasta viene applicata quando le trasformazioni vengono applicate al file mentre vengono caricate, quindi al termine del caricamento la versione trasformata è immediatamente disponibile.
Come nota speciale qui, quando applichi una trasformazione lazy per la prima volta, il file viene trasmesso in streaming mentre avviene la trasformazione, quindi nel caso di un file video, inizia subito a giocare mentre la trasformazione viene eseguita al volo.
C'è un'API e diversi SDK per accedere a tutte le funzionalità di Cloud, in questo esempio useremo il plugin jQuery per le trasformazioni video.
Quindi ora implementiamo le funzionalità necessarie nella nostra applicazione per eseguire e visualizzare le trasformazioni dei nostri video. La prima cosa da fare è creare un nuovo titolare nel nostro controller per l'oggetto di trasformazione. Nella parte superiore della dichiarazione delle variabili, aggiungere il seguente codice:
var transform = cloud_name: 'CLOUD_NAME';
Qui stiamo impostando il cloud_name attributo a a trasformata di oggetto per impostare il resto dei parametri di trasformazione.
Nel loadVideo () metodo, abbiamo bisogno di sostituire il $ .cloudinary.video secondo parametro con il nuovo trasformare oggetto.
$ ('# video-container') .html ($ ($ .cloudinary.video (public_id, transform)) .attr ('controls', 'controls') .attr ('autoplay', 'autoplay')); Questa è tutta la preparazione di cui abbiamo bisogno per ridimensionare i nostri file video. Se si controlla il markup HTML, si noterà che il modulo contenente i campi di trasformazione richiama un metodo scope quando inviato. Ora dichiareremo questo metodo, quindi nella parte inferiore del controller aggiungiamo il seguente codice:
$ scope.update = function () var width = $ ('# video-width') .val (), height = $ ('# video-height') .val (), crop = $ ('input [nome = ritaglio]: selezionato ') .val (), gravità = $ (' input [nome = gravità]: controllato ') .val (), background = $ (' # video-background ') .val (); transform.crop = crop; if (width) transform.width = width; if (height) transform.height = height; if (gravità) transform.gravity = gravità; if (background) transform.background = background; loadVideo (); ; Questo metodo è piuttosto lungo, ma ciò che fa è creare recuperare i parametri di trasformazione introdotti nel modulo di trasformazione e impostare i parametri appropriati in precedenza trasformare oggetto.
Quando aggiorniamo il video utilizzando il modulo di trasformazione, il loadVideo il metodo verrà eseguito con il nuovo oggetto di trasformazione. E il video verrà aggiornato.
Prima di proseguire con le prossime trasformazioni, dobbiamo assicurarci di resettare il trasformare oggetto per ogni file caricato, all'interno di cloudinarystart callback, aggiungi il seguente codice.
transform = cloud_name: "CLOUD_NAME";
Qui stiamo solo re-impostando il trasformare oggetto allo stato iniziale con solo il cloud_name set di parametri.
Un'altra trasformazione che può essere eseguita è quella di ruotare il video in streaming. Proprio come con le trasformazioni di ridimensionamento e ritaglio, possiamo utilizzare uno degli SDK o plugin disponibili, oppure possiamo usare l'URL per impostare i parametri di rotazione. Per il plugin jQuery è il parametro per ruotare il video generato angolo.
Ancora una volta dobbiamo impostare il parametro di rotazione per trasformare oggetto, dentro il aggiornare dichiarazione del metodo, poco prima del loadVideo chiamare aggiungere il seguente codice.
var angle = $ (# video-angle) .val (); if (angle) transform.angle = angle;
Con questo ultimo frammento possiamo ora eseguire la rotazione dei nostri video usando i controlli di trasformazione in modo da ruotare un video e ridimensionarlo come segue.
Ci sono molte altre trasformazioni che possono essere applicate ai file video, tra cui transcodifica video, manipolazione audio, aggiunta di sovrapposizioni e trasformazione GIF. Per un elenco completo dei parametri disponibili, fare riferimento alla documentazione ufficiale.
Saremo lieti di offrire un lettore fortunato, scelto a caso, quattro mesi gratuiti per i nostri piani standard (puoi vedere i nostri piani qui.
Basta twittare un link a questo post utilizzando il pulsante di condivisione di Twitter che si trova sulla barra laterale.
Una volta che il concorso è finito, Cloudinary contatterà un fortunato vincitore a caso e ti seguirà per richiedere il premio.
In questo tutorial eseguiamo upload e trasformazioni video usando jQuery, ma ci sono anche molti altri SDK per integrare facilmente qualsiasi applicazione con il servizio Cloudinary. E tutte le transcodifiche e le trasformazioni vengono eseguite sul cloud senza richiedere alcun software aggiuntivo, questo rende il servizio una soluzione davvero valida e semplice per la manipolazione dei media nelle applicazioni mobili e web. Per un elenco completo di tutti gli SDK e plug-in disponibili, fare riferimento alla documentazione ufficiale.
Con Cloudinary siamo in grado di gestire immagini e video in modo semplice e affidabile. Si prenderà cura della gestione di tutto lo stoccaggio, ottimizzazione, trasformazione, memorizzazione nella cache e consegna.
Tutte le trasformazioni e le manipolazioni eseguite nel tutorial possono essere eseguite anche utilizzando uno qualsiasi degli SDK e plug-in disponibili.
Lascia i tuoi commenti, domande, pensieri e suggerimenti nella sezione commenti qui sotto.
