Share
Dans le présent tutoriel, nous allons créer une application Web simple pour gérer la manipulation vidéo sur le Web. Nous allons télécharger un fichier vidéo sur le cloud et effectuer un transcodage en direct et des transformations à la volée afin de créer un fichier vidéo personnalisé sur lequel diffuser en continu. n'importe quel appareil. Pour cela, nous allons utiliser le service Cloudinary pour stocker, transcoder, transformer et diffuser des vidéos en utilisant dans ce cas le plugin jQuery disponible..
“Vous développez une application web ou mobile? Cloudinary, c'est comment gérer vos images. ”Ceci est un extrait tiré de la page À propos de notre site Web Cloudinary. Et dans ce tutoriel, grâce à l'utilisation d'exemples réels et de comparaisons avant / après, nous découvrirons que cela n'est pas vrai uniquement pour les images, mais également pour les vidéos..
Dans ce didacticiel, nous allons créer un outil pour télécharger et transformer des vidéos en utilisant l’URL du fichier téléchargé. Nous allons seulement développer la partie JavaScript pour télécharger et transformer les fichiers vidéo. Téléchargez le code d'accompagnement pour suivre.
Je pense que nous pouvons convenir avec certitude que les images et les vidéos ont un impact considérable sur la vie d'aujourd'hui. Outre le problème lié à la gestion du stockage et de la livraison, nous, les développeurs, devons faire face à beaucoup de frais généraux pour l'affichage d'une vidéo sur un site Web ou sur un téléphone mobile. dispositif. Nous devons prendre en compte la taille et le format du fichier, si nous devons ou non diffuser ou télécharger, l'optimisation de fichier et de nombreux autres aspects, et cette liste s'allonge encore et encore lorsque nous ajoutons de nouvelles cibles et de nouveaux fichiers.
Oui, le multimédia joue un rôle majeur dans les applications actuelles, qu'elles soient basées sur le Web ou sur mobile, mais cela ne devrait pas être le cas en période de développement. Lors de la création d'une nouvelle application, nous devons pouvoir nous concentrer sur son objectif et ne pas perdre de temps avec les tracas liés au stockage et à l'optimisation des fichiers multimédia. Et c'est précisément là que Cloudinary vient à la rescousse.
Cloudinary est un SaaS (logiciel en tant que service) qui gère toutes les tâches liées à la manipulation d'images et de vidéos, telles que le téléchargement, le stockage, l'optimisation, la diffusion et même fournissant de nombreuses autres fonctionnalités telles que la transformation, le recadrage, le redimensionnement et la détection des visages. . Et toutes les transformations et transcodages sont effectués en temps réel et à la volée. Cloudinary utilise Amazon S3 pour le stockage de fichiers et s'intègre aux réseaux Content Delivery Networks, tels qu'Akamai, pour offrir une diffusion très efficace..
Afin de suivre, vous aurez besoin d'un compte Cloudinary pour télécharger des fichiers vidéo et effectuer des transformations, créez-vous un compte gratuit.
Mais c’est assez de bavardage: mettons les mains dans le cambouis et montrons des exemples concrets de ce que nous pouvons faire.
Dans toute application qui utilise des images et des vidéos pour engager les utilisateurs, la première tâche que nous devons prendre en charge est le téléchargement de fichiers. Afin de suivre le tutoriel, allez-y et créez un compte gratuit.
Pour télécharger des fichiers sur un compte Cloudinary, les demandes doivent avoir une signature de demande basée sur votre clé d'API et votre secret. Cependant, dans certains cas, vous devez prendre en charge le téléchargement de fichiers directement à partir du navigateur, sans avoir à envoyer les données au serveur pour signer la demande et télécharger les fichiers, et c’est là que Téléchargement direct non signé se déroule.
Pour l'activer, dans votre Console de compte aller vers Paramètres> Télécharger.
Au bas de la page, vous trouverez un Télécharger des préréglages réglage et la Activer le téléchargement non signé option. Nous devons le sélectionner afin que notre application puisse télécharger des fichiers sans avoir à signer les demandes. Cela créera un nouveau préréglage de téléchargement pour lequel les téléchargements non signés sont activés. Prenez note du nom du préréglage que nous allons utiliser dans un instant..
Voilà pour la partie configuration. Ensuite, nous allons effectuer le téléchargement du fichier, et pour cela, nous utiliserons le plugin jQuery de Cloudinary. Allez à la page de téléchargement et téléchargez-le.
Pour que cela fonctionne, nous devons également disposer de jQuery. Pour les téléchargements directs par le navigateur, nous avons également besoin de dépendances à partir du plug-in jQuery File Upload. Ces dépendances viennent déjà avec le plugin Cloudinary.
Pour télécharger un fichier directement à partir du navigateur, il vous suffit d'activer Cloudinary dans le champ de saisie du fichier, de la même manière..
Accentsconagua
$ ('.upload-file') .unsigned_cloudinary_upload ('UPLOAD_PRESET', nuage-nom: 'CLOUD_NAME', tags: 'UPLOAD_TAGS'); le UPLOAD_PRESET paramètre est le nom du préréglage dans lequel le Envois directs non signés sont activés, celui créé à l'étape précédente. Le nom du nuage est un nom attribué à tous les utilisateurs du système Cloudinary. Ceci est obtenu lors de la création d'un compte et est affiché dans le tableau de bord de l'utilisateur. Enfin, le champ balises est facultatif et vous pouvez définir une balise spéciale pour indiquer qu'un fichier a été directement téléchargé depuis le navigateur..
Après avoir téléchargé un fichier vidéo, nous devons maintenant le diffuser à nos utilisateurs. Le service se chargera de l'optimisation et de la mise en cache du fichier pour une livraison rapide. Dans notre méthode de contrôleur, ajoutez quelques détenteurs pour stocker la source, le nom et le chemin complet de la vidéo téléchargée..
var public_id = ";
Ensuite, pour afficher notre aperçu vidéo une fois le fichier chargé, nous allons lier un écouteur d’événement au unsigned_cloudinary_upload appel. Après la parenthèse fermante, ajoutez le code suivant.
.bind ('cloudinarydone', fonction (e, data) public_id = data.result.public_id; $ ('.video-title') .html (data.result.original_filename); loadVideo ();); Enfin, nous devons définir le loadVideo méthode qui se chargera de définir la source de balise vidéo HTML5 et de la recharger. Dans la fonction de contrôleur, définissez un nouveau loadVideo méthode:
loadVideo = function () $ ('# conteneur vidéo') .html ($ ($ .cloudinary.video (public_id, cloud_name: 'CLOUD_NAME')) .attr ('controls', 'controls') .attr ('autoplay', 'autoplay')); ; Ici, nous utilisons le plugin jQuery de Cloudinary pour créer la balise video de la vidéo téléchargée. Une fois l'élément HTML créé, nous ajoutons le les contrôles et lecture automatique paramètres et enfin l'ajouter à la conteneur vidéo élément. Notez que nous devons également définir le cloud_name utilisé pour télécharger la vidéo.
Une fois téléchargés, Cloudinary transforme et transforme automatiquement chaque vidéo téléchargée en MP4, WebM et OGV requis par les navigateurs Web et mobiles, ainsi qu'en FLV pour Flash..
Nous pourrions le laisser comme ça et ça va marcher, mais je vais introduire quelques transformations d’UI pour donner un retour d’informations sur ce qui se passe et définir des repères d’aide pour les transformations ultérieures. À l'intérieur de cloudinarydone rappel, en dessous du loadVideo appel de méthode, ajoutez le code suivant.
$ ('.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 (); Ici, nous ne faisons que définir des chaînes d'assistance pour indiquer la taille de la vidéo téléchargée en tant que référence. Ensuite, nous affichons le formulaire avec les contrôles de transformation vidéo.
Enfin, je souhaite introduire un message indiquant qu'un téléchargement de vidéo est en cours. À la parenthèse finale de la cloudinarydone classeur d'événements, ajoutez le code suivant.
.bind ('cloudinarystart', fonction (e, données) $ ('.help-block', $ ('# upload-file') .parent ()) .show (). html ('Uploading…'); $ ('# transform-controls') .hide ();); Cet extrait donne simplement à l'utilisateur un petit retour d'informations sur ce qui se passe dans les coulisses et masque les commandes de transformation vidéo.
Jusqu'ici tout va bien - nous pouvons télécharger des vidéos et les afficher dans le navigateur avec seulement deux lignes de code. Mais maintenant, pour le plaisir, commençons à transformer nos fichiers vidéo en modifiant simplement l'URL utilisée pour le charger..
Les transformations les plus élémentaires que nous pouvons effectuer avec les fichiers vidéo téléchargés consistent à modifier la largeur et la hauteur et à personnaliser la manière dont le recadrage doit être effectué..
Cinq paramètres permettent de contrôler le redimensionnement et le recadrage d’un fichier vidéo:
Ce sont les paramètres utilisés pour redimensionner un fichier vidéo. Pour plus d'explications sur chacune d'elles, reportez-vous à la documentation officielle.
Cloudinary effectue les transformations de deux manières: paresseusement et avec impatience.
Une transformation paresseuse est appliquée à la volée lors de la demande d'un fichier téléchargé. La première fois que vous accédez à un fichier transformé, la transformation est effectuée et le fichier résultant sera mis en cache pour une utilisation ultérieure..
Une transformation rapide est appliquée lorsque les transformations sont appliquées au fichier lors de son téléchargement. Ainsi, une fois le téléchargement terminé, la version transformée est immédiatement disponible..
Il est à noter que lorsque vous appliquez une transformation paresseuse pour la première fois, le fichier est diffusé au fur et à mesure que la transformation se produit. Ainsi, dans le cas d'un fichier vidéo, la lecture commence tout de suite lorsque la transformation est effectuée à la volée..
Il existe une API et plusieurs SDK pour accéder à toutes les fonctionnalités Cloudinary. Dans cet exemple, nous allons utiliser le plug-in jQuery pour les transformations vidéo..
Alors maintenant, implémentons dans notre application les fonctionnalités nécessaires pour effectuer et afficher les transformations de nos vidéos. La première chose à faire est de créer un nouveau titulaire dans notre contrôleur pour l’objet de transformation. En haut de la déclaration de variables, ajoutez le code suivant:
transformation de var = cloud_name: 'CLOUD_NAME';
Ici nous mettons la cloud_name attribuer à un tranform objet pour définir le reste des paramètres de transformation.
dans le loadVideo () méthode, nous devons remplacer le $ .cloudinary.video deuxième paramètre avec le nouveau transformer objet.
$ ('# video-container') .html ($ ($ .cloudinary.video (public_id, transform)) .attr ('controls', 'controls') .attr ('autoplay', 'autoplay')); C'est toute la préparation dont nous avons besoin pour redimensionner nos fichiers vidéo. Si vous vérifiez le balisage HTML, vous remarquerez que le formulaire contenant les champs de transformation appelle une méthode de portée lors de son envoi. Nous allons maintenant déclarer cette méthode, alors au bas du contrôleur, ajoutez le code suivant:
$ scope.update = function () var width = $ ('# video-width') .val (), height = $ ('# video-height') .val (), crop = $ ('input [nom = recadrage]: coché ') .val (), gravité = $ (' entrée [nom = gravité]: coché ') .val (), fond = $ (' # vidéo-fond ') .val (); transform.crop = recadrer; if (width) transform.width = width; if (height) transform.height = height; if (gravité) transform.gravity = gravité; if (background) transform.background = background; loadVideo (); ; Cette méthode est un peu longue, mais elle crée consiste à extraire les paramètres de transformation introduits dans le formulaire de transformation et à définir les paramètres appropriés dans la configuration précédente. transformer objet.
Lorsque nous mettons à jour la vidéo en utilisant le formulaire de transformation, le loadVideo La méthode sera exécutée avec le nouvel objet de transformation. Et la vidéo sera mise à jour.
Avant de passer aux prochaines transformations, nous devons nous assurer de réinitialiser le transformer objet pour chaque fichier téléchargé, à l'intérieur du cloudinarystart callback, ajoutez le code suivant.
transformation = cloud_name: 'CLOUD_NAME';
Ici, nous ne faisons que redéfinir la transformer objecter à l'état initial avec juste le cloud_name jeu de paramètres.
Une autre transformation qui peut être effectuée consiste à faire pivoter la vidéo en streaming. Tout comme pour les transformations de redimensionnement et de rognage, nous pouvons utiliser l'un des kits de développement logiciel (SDK) ou les plug-ins disponibles ou l'URL pour définir les paramètres de rotation. Pour le plugin jQuery, le paramètre permettant de faire pivoter la vidéo générée est angle.
Une fois encore, nous devons définir le paramètre de rotation pour transformer objet, à l'intérieur du mettre à jour déclaration de méthode, juste avant la loadVideo appel ajoutez le code suivant.
var angle = $ (# angle vidéo) .val (); if (angle) transform.angle = angle;
Avec ce dernier extrait, nous pouvons maintenant effectuer une rotation de nos vidéos à l’aide des commandes de transformation, il nous fallait donc faire pivoter une vidéo et la redimensionner comme suit:.
De nombreuses autres transformations peuvent être appliquées aux fichiers vidéo, notamment le transcodage vidéo, la manipulation audio, l'ajout de superposition et la transformation GIF. Pour une liste complète des paramètres disponibles, reportez-vous à la documentation officielle..
Nous serons heureux de donner à un lecteur chanceux, choisi au hasard, quatre mois gratuits pour n’importe lequel de nos plans standards (vous pouvez voir nos plans ici.
Il suffit de tweeter un lien vers ce message en utilisant le bouton de partage Twitter situé dans la barre latérale..
Une fois le concours terminé, Cloudinary contactera un gagnant chanceux au hasard et vous suivra afin de réclamer votre prix..
Dans ce didacticiel, nous effectuons des transferts et une transformation de vidéos à l'aide de jQuery, mais il existe également de nombreux autres SDK permettant d'intégrer facilement toute application au service Cloudinary. Et tous les transcodages et transformations sont effectués sur le cloud sans nécessiter de logiciel supplémentaire, ce qui fait de ce service une solution réellement viable et simple pour la manipulation de supports dans les applications mobiles et Web. Pour une liste complète de tous les SDK et plugins disponibles, reportez-vous à la documentation officielle..
Avec Cloudinary, nous pouvons manipuler des images et des vidéos de manière très simple et fiable. Il s’occupera de tout le stockage, de l’optimisation, de la transformation, de la mise en cache et de la livraison..
Toutes les transformations et manipulations effectuées dans le didacticiel peuvent également être effectuées à l'aide de l'un des SDK et plug-ins disponibles..
Laissez vos commentaires, questions, idées et suggestions dans la section commentaires ci-dessous.
