Share
In diesem Tutorial erstellen wir eine einfache Webanwendung für die Videomanipulation für das Web. Wir laden eine Videodatei in die Cloud hoch und führen Live-Transcodierungen und Transformationen durch, um eine maßgeschneiderte Videodatei zum Streamen zu erstellen jedes Gerät. Dazu verwenden wir den Cloudinary-Dienst zum Speichern, Transkodieren, Umwandeln und Streamen von Videos. In diesem Fall wird das verfügbare jQuery-Plugin verwendet.
„Entwickeln Sie eine Web- oder mobile Anwendung? Mit Cloudinary sollten Sie Ihre Bilder verwalten. “Dies ist ein Auszug aus der Info-Seite der Cloudinary-Website. In diesem Tutorial werden wir anhand realer Beispiele und Vorher / Nachher-Vergleichen herausfinden, dass dies nicht nur für Bilder gilt, sondern auch für Videos.
In diesem Lernprogramm erstellen wir ein Tool zum Hochladen und Umwandeln von Videos mit der hochgeladenen Datei-URL. Wir werden nur den JavaScript-Teil entwickeln, um die Videodateien hochzuladen und umzuwandeln. Laden Sie den begleitenden Code herunter, um ihn zu folgen.
Ich denke, wir können uns sicher einig sein, dass Bilder und Videos einen großen Einfluss auf das heutige Leben haben. Abgesehen von der mühelosen Handhabung von Speicher und Bereitstellung müssen wir Entwickler mit viel Aufwand zurechtkommen, um beispielsweise ein Video auf einer Website oder auf einem Handy anzuzeigen Gerät. Wir müssen die Größe und das Format der Datei berücksichtigen, ob wir streamen oder herunterladen sollen, die Optimierung von Dateien und viele andere Aspekte. Diese Liste wird immer weiter angezeigt, wenn wir neue Ziele und Dateien hinzufügen.
Ja, Multimedia spielt in heutigen Anwendungen eine große Rolle, sei es webbasiert oder mobil. Dies sollte jedoch in der Entwicklungszeit nicht der Fall sein. Bei der Erstellung einer neuen Anwendung müssen wir uns auf ihren Zweck konzentrieren können und keine Zeit mit der Mühe der Speicherung und Optimierung von Multimediadateien verschwenden. Und genau hier kommt Cloudinary zur Rettung.
Cloudinary ist ein SaaS (Software as a Service), der alle Aufgaben im Zusammenhang mit der Bild- und Videomanipulation erledigt, z. B. Upload, Speicherung, Optimierung, Bereitstellung und sogar viele andere Funktionen wie Bildtransformation, Zuschneiden, Skalieren und Gesichtserkennung . Alle Transformationen und Transkodierungen werden in Echtzeit und im laufenden Betrieb durchgeführt. Cloudinary verwendet Amazon S3 für die Dateispeicherung und lässt sich in führende Content Delivery Networks wie Akamai integrieren, um eine sehr effiziente Bereitstellung zu ermöglichen.
Um folgen zu können, benötigen Sie ein Cloudinary-Konto, um Videodateien hochzuladen und Transformationen durchzuführen. Erstellen Sie anschließend ein kostenloses Konto.
Aber das ist genug chit chat - lasst uns die Hände schmutzig machen und einige Beispiele zeigen, was wir tun können.
In jeder Anwendung, die Bilder und Videos verwendet, um Benutzer einzubeziehen, müssen wir als Erstes das Hochladen von Dateien durchführen. Um dem Tutorial zu folgen, erstellen Sie ein kostenloses Konto.
Um Dateien auf ein Cloudinary-Konto hochzuladen, müssen die Anforderungen über eine Anforderungssignatur verfügen, die auf Ihrem API-Schlüssel und -geheimnis basiert. Es gibt jedoch Fälle, in denen Sie das Hochladen von Dateien direkt aus dem Browser unterstützen müssen, ohne die Daten an das Backend senden zu müssen, um die Anforderung zu signieren und die Dateien hochzuladen Direkter nicht signierter Upload stattfinden.
Um es zu aktivieren, in Ihrem Kontokonsole navigiere zu Einstellungen> Hochladen.
Am unteren Rand der Seite finden Sie eine Laden Sie Voreinstellungen hoch Einstellung und die Aktivieren Sie das nicht signierte Hochladen Möglichkeit. Wir müssen es auswählen, damit unsere Anwendung Dateien hochladen kann, ohne die Anforderungen signieren zu müssen. Dadurch wird eine neue Upload-Vorgabe erstellt, für die nicht signierte Uploads aktiviert sind. Notieren Sie sich den voreingestellten Namen, da wir ihn gleich verwenden werden.
Das wars für den Konfigurationsteil. Als Nächstes führen wir das eigentliche Hochladen der Datei durch. Dazu verwenden wir das jQuery-Plugin von Cloudinary. Gehen Sie zur Download-Seite und laden Sie sie herunter.
Damit es funktioniert, müssen wir auch jQuery haben, und für direkte Browser-Uploads benötigen wir auch einige Abhängigkeiten vom jQuery File Upload-Plugin. Diese Abhängigkeiten sind bereits im Cloudinary-Plugin enthalten.
Um eine Datei direkt aus dem Browser hochzuladen, müssen Sie lediglich Cloudinary im Dateieingabefeld aktivieren.
Accentsconagua
$ ('.upload-file') .unsigned_cloudinary_upload ('UPLOAD_PRESET', Wolkenname: 'CLOUD_NAME', Tags: 'UPLOAD_TAGS'); Das UPLOAD_PRESET Parameter ist der Name der Voreinstellung, in der die Direkte nicht signierte Uploads aktiviert sind, die im vorherigen Schritt erstellte. Der Cloud-Name ist ein Name, der allen Benutzern im Cloudinary-System zugewiesen wird. Diese wird beim Erstellen eines Kontos abgerufen und im Dashboard des Benutzers angezeigt. Das Feld "Tags" ist optional und Sie können ein spezielles Tag festlegen, um anzugeben, dass eine Datei direkt vom Browser hochgeladen wurde.
Nach dem Hochladen einer Videodatei müssen wir sie nun an unsere Benutzer streamen. Der Dienst sorgt für die Optimierung und das Zwischenspeichern der Datei für eine schnelle Lieferung. Fügen Sie in unserer Controller-Methode ein paar Inhaber hinzu, um die Quelle, den Namen und den vollständigen Pfad des hochgeladenen Videos zu speichern.
var public_id = ";
Um unsere Video-Vorschau anzuzeigen, nachdem die Datei hochgeladen wurde, binden wir einen Ereignis-Listener an den unsigned_cloudinary_upload Anruf. Hängen Sie nach der schließenden Klammer den folgenden Code an.
.bind ('cloudinarydone', Funktion (e, data) public_id = data.result.public_id; $ ('.video-title') .html (data.result.original_filename); loadVideo ();); Zuletzt müssen wir das definieren loadVideo Eine Methode, mit der die HTML5-Video-Tag-Quelle festgelegt und neu geladen wird. Definieren Sie in der Controller-Funktion ein neues loadVideo Methode:
loadVideo = function () $ ('# video-container') .html ($ ($ .cloudinary.video (public_id, cloud_name: 'CLOUD_NAME'))) .attr ('controls', 'controls') .attr ("Autoplay", "Autoplay")); ; Hier verwenden wir das jQuery-Plugin von Cloudinary, um das Video-Tag des hochgeladenen Videos zu erstellen. Sobald das HTML-Element erstellt ist, hängen wir das an Kontrollen und automatisches Abspielen paramters und fügen Sie es schließlich dem hinzu Video-Container Element. Beachten Sie, dass wir auch das einstellen müssen cloud_name verwendet, um das Video hochzuladen.
Wenn Cloudinary hochgeladen wird, wandelt und konvertiert Cloudinary automatisch jedes hochgeladene Video in MP4, WebM und OGV, das von Web- und mobilen Browsern benötigt wird, sowie von FLV für Flash.
Wir könnten es so belassen und es wird funktionieren, aber ich werde einige UI-Transformationen einführen, um Feedback zu geben, was passiert, und ein paar Hilfestellungen für spätere Transformationen zu geben. In der cloudinarydone Rückruf unter dem loadVideo Methodenaufruf, fügen Sie den folgenden Code hinzu.
$ ('.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 (); Hier stellen wir nur einige Hilfszeichenfolgen ein, um die Größe des hochgeladenen Videos als Referenz anzugeben. Dann zeigen wir das Formular mit den Steuerelementen für die Videotransformation an.
Zum Schluss möchte ich noch eine Nachricht einblenden, dass ein Video-Upload läuft. Bei der abschließenden Klammer des cloudinarydone Fügen Sie den folgenden Code hinzu.
.bind ('cloudinarystart', Funktion (e, data) $ ('.help-block', $ ('# upload-file') .parent ()) .show (). html ('Uploading…'); $ ('# transform-Steuerelemente') .hide ();); Dieses Snippet gibt dem Benutzer lediglich ein kleines Feedback darüber, was sich hinter den Kulissen abspielt, und blendet die Steuerelemente für die Videotransformation aus.
So weit so gut - wir können Videos hochladen und mit nur wenigen Codezeilen im Browser anzeigen lassen. Nun aber für den Spaß, beginnen wir mit der Umwandlung unserer Videodateien, indem Sie einfach die URL ändern, die wir zum Laden der URL verwenden.
Die grundlegendsten Umwandlungen, die wir mit den hochgeladenen Videodateien durchführen können, bestehen darin, die Breite und Höhe zu ändern und die Art und Weise des Zuschneidens anzupassen.
Es gibt fünf Parameter, die steuern, wie eine Videodatei skaliert und beschnitten wird:
Dies sind die Parameter, mit denen die Größe einer Videodatei geändert wird. Weitere Informationen dazu finden Sie in der offiziellen Dokumentation.
Cloudinary führt zwei Arten der Transformation durch: träge und eifrig.
Bei der Anforderung einer hochgeladenen Datei wird eine faule Umwandlung im Handumdrehen angewendet. Beim ersten Zugriff auf eine transformierte Datei wird die Transformation ausgeführt und die resultierende Datei wird für die spätere Verwendung zwischengespeichert.
Eine eifrige Umwandlung wird angewendet, wenn die Umwandlungen beim Hochladen auf die Datei angewendet werden. Nach dem Hochladen ist die umgewandelte Version sofort verfügbar.
Wenn Sie hier zum ersten Mal eine Lazy-Transformation anwenden, wird die Datei bei der Transformation gestreamt. Wenn eine Videodatei vorliegt, wird sie sofort abgespielt, während die Transformation direkt ausgeführt wird.
Es gibt eine API und mehrere SDKs, um auf alle Cloudinary-Funktionen zuzugreifen. In diesem Beispiel verwenden wir das jQuery-Plugin für die Videotransformationen.
Lassen Sie uns nun die erforderliche Funktionalität in unserer Anwendung implementieren, um Transformationen für unsere Videos durchzuführen und anzuzeigen. Als Erstes müssen Sie in unserem Controller einen neuen Halter für das Transformationsobjekt erstellen. Fügen Sie am oberen Rand der Variablendeklaration den folgenden Code hinzu:
var transform = cloud_name: 'CLOUD_NAME';
Hier setzen wir die cloud_name Attribut a transformieren Objekt, um den Rest der Transformationsparameter festzulegen.
In dem loadVideo () Methode müssen wir die ersetzen $ .cloudinary.video zweiter Parameter mit dem neuen verwandeln Objekt.
$ ('# video-container') .html ($ ($ .cloudinary.video (public_id, transform))) .attr ('controls', 'controls') .attr ('autoplay', 'autoplay')); Das ist alles Vorbereitung, um unsere Videodateien zu verkleinern. Wenn Sie das HTML-Markup überprüfen, werden Sie feststellen, dass das Formular mit den Transformationsfeldern beim Senden eine Bereichsmethode aufruft. Wir werden jetzt diese Methode deklarieren, und fügen Sie am unteren Rand des Controllers folgenden Code hinzu:
$ scope.update = function () var width = $ ('# video-width') .val (), height = $ ('# video-height') .val (), crop = $ ('input [name] = Ernte]: überprüft ') .val (), Schwerkraft = $ (' Eingabe [Name = Schwerkraft]: geprüft ') .val (), Hintergrund = $ (' # video-background ') .val (); transform.crop = Ernte; if (width) transform.width = width; if (height) transform.height = height; if (Schwerkraft) transform.gravity = Schwerkraft; if (Hintergrund) transform.background = Hintergrund; loadVideo (); ; Diese Methode ist etwas langwierig. Sie erstellt jedoch die in das Transformationsformular eingeführten Transformationsparameter und setzt die entsprechenden Parameter im vorherigen verwandeln Objekt.
Wenn wir das Video mit der Transformationsform aktualisieren, wird die loadVideo Die Methode wird mit dem neuen Transformationsobjekt ausgeführt. Und das Video wird aktualisiert.
Bevor wir mit den nächsten Transformationen fortfahren, müssen wir die verwandeln Objekt für jede hochgeladene Datei im cloudinarystart Rückruf, fügen Sie den folgenden Code hinzu.
transform = cloud_name: 'CLOUD_NAME';
Hier stellen wir nur das neu ein verwandeln gegen den Ausgangszustand nur mit dem cloud_name Parametersatz.
Eine andere Transformation, die durchgeführt werden kann, ist das Drehen des gestreamten Videos. Genau wie bei den Größenänderungs- und Beschneidungsumwandlungen können wir eines der verfügbaren SDKs oder Plugins verwenden oder die URL zum Festlegen der Rotationsparameter verwenden. Für das jQuery-Plugin ist der Parameter zum Drehen des erzeugten Videos Winkel.
Wieder müssen wir den Rotationsparameter für einstellen verwandeln Gegenstand, innerhalb der aktualisieren Methodendeklaration, kurz vor dem loadVideo rufen Sie den folgenden Code auf.
var angle = $ (# video-angle) .val (); if (Winkel) transform.angle = Winkel;
Mit diesem letzten Ausschnitt können wir unsere Videos jetzt mit den Transformationssteuerelementen drehen, sodass wir ein Video drehen und dessen Größe wie folgt ändern.
Es gibt viele andere Umwandlungen, die auf Videodateien angewendet werden können, einschließlich Videokodierung, Audiomanipulation, Hinzufügen von Überlagerungen und GIF-Umwandlung. Eine vollständige Liste der verfügbaren Parameter finden Sie in der offiziellen Dokumentation.
Wir freuen uns, einem zufällig ausgewählten glücklichen Leser vier Monate lang frei geben zu können.
Twittern Sie einfach einen Link zu diesem Beitrag mit dem Twitter-Freigabebutton in der Seitenleiste.
Sobald der Wettbewerb beendet ist, wird sich Cloudinary nach dem Zufallsprinzip mit einem glücklichen Gewinner in Verbindung setzen und mit Ihnen Kontakt aufnehmen, um Ihren Preis zu erhalten.
In diesem Lernprogramm führen wir mit jQuery Video-Uploads und -Transformationen durch. Es gibt jedoch auch viele andere SDKs, mit denen Sie problemlos jede Anwendung in den Cloudinary-Dienst integrieren können. Alle Transcodierungen und Transformationen werden in der Cloud durchgeführt, ohne dass zusätzliche Software erforderlich ist. Dies macht den Service zu einer wirklich praktikablen und einfachen Lösung für die Medienmanipulation in mobilen und Webanwendungen. Eine vollständige Liste aller verfügbaren SDKs und Plugins finden Sie in der offiziellen Dokumentation.
Mit Cloudinary können wir sehr einfach und zuverlässig mit Bildern und Videos umgehen. Es kümmert sich um den gesamten Speicher, die Optimierung, die Transformation, das Caching und die Zustellung.
Alle im Lernprogramm durchgeführten Transformationen und Manipulationen können auch mit den verfügbaren SDKs und Plugins ausgeführt werden.
Hinterlassen Sie Ihre Kommentare, Fragen, Gedanken und Vorschläge in den folgenden Kommentaren.
