Astuces cloudinary pour la vidéo

Créer une vidéo prend du temps. Une vidéo bien faite de 5 minutes peut prendre des heures pour planifier, enregistrer et modifier - et c'est avant de commencer à parler de la création de cette vidéo cohérente avec toutes les autres vidéos de votre site.

Lorsque nous avons entrepris le projet Jamstack Explorers (une ressource éducative axée sur la vidéo pour les développeurs Web), nous voulions trouver le bon équilibre de qualité et d'expédition: que pourrions-nous automatiser dans notre processus de production vidéo pour réduire le temps et le nombre d'étapes nécessaires pour créer du contenu vidéo sans sacrifier la qualité?

Avec l'aide de Coudinary, nous avons pu fournir une approche de marque cohérente dans tous nos contenus vidéo sans ajouter un tas de tâches d'édition supplémentaires pour les gens qui créent des vidéos. Et, en bonus, si nous mettons à jour notre marque à l'avenir, nous pouvons mettre à jour toute la marque vidéo sur tout le site à la fois - aucune édition vidéo requise!

Que signifie la «marque vidéo»?

Pour que chaque vidéo sur le site Explorers a l'impression que tout va bien, nous incluons quelques pièces courantes dans chaque vidéo:

1. Une scène de titre
2. Un court pare-chocs d'intro (clip vidéo) qui montre la marque Jamstack Explorers
3. Un court pare-chocs outro qui compte soit à la vidéo suivante ou montre une «mission accomplie» s'il s'agit de la dernière vidéo de la mission

Sauter à la fin: voici à quoi ressemble une vidéo de marque

Pour montrer l'impact de l'ajout de la marque, voici l'une des vidéos de Jamstack Explorers sans aucune marque:

Cette vidéo (et cette mission de Ben Hong) est légitimement exceptionnelle! Cependant, il commence et se termine un peu brusquement, et nous n'avons pas une idée de l'endroit où vit cette vidéo.

Nous avons travaillé avec Adam Hald pour créer des actifs vidéo de marque qui aident à donner à chaque vidéo un sentiment d'appartenance. Découvrez la même vidéo avec toute la marque Explorers Applied:

Nous obtenons le même contenu excellent, mais maintenant nous avons ajouté un peu de VA-VA-VOOM supplémentaire qui donne l'impression que cela fait partie d'une histoire plus grande.

Dans cet article, nous parcourons la façon dont nous personnalisons automatiquement chaque vidéo à l'aide de Cloudinary.

Comment le cloudary rend-il cela possible?

Cloudinary est un réseau de livraison d'actifs basé sur le cloud qui nous donne une API puissante basée sur URL pour manipuler et transformer les supports. Il prend en charge toutes sortes de types d'actifs, mais où il brille vraiment avec des images et des vidéos.

Pour utiliser Cloudinary, vous créez un compte gratuit, puis téléchargez votre actif. Cet actif devient alors disponible dans une URL cloudinary:

 https://res.coudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg
                           ^^^^^^^ ^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^
                              | | |
                              Vvv
                      Cloud (compte) Nom Version (Facultatif) Nom du fichier

Cette URL pointe vers l'image d'origine et peut être utilisée dans les balises et autres balisages.

Ajustez dynamiquement le format et la qualité des fichiers pour réduire les tailles de fichiers

Si nous utilisons cette image sur un site Web et que nous souhaitons améliorer les performances de notre site, nous pouvons décider de réduire la taille de cette image en utilisant des formats de nouvelle génération comme WebP, AVIF, etc. Ces nouveaux formats sont beaucoup plus petits, mais ne sont pas pris en charge par tous les navigateurs, ce qui signifierait généralement l'utilisation d'un outil pour générer plusieurs versions de cette image dans différents formats, puis en utilisant un élément ou un autre balisage spécialisé pour fournir des options modernes avec le secours JPG pour les navigateurs plus âgés.

Avec Cloudinary, tout ce que nous avons à faire est d'ajouter une transformation à l'URL:

 https://res.coudinary.com/netlify/image/upload/q_auto,f_auto/v1605632851/explorers/avatar.jpg
                                                ^^^^^^^^^^^^
                                                      |
                                                      V
                                    Transformations de qualité automatique et de format

Ce que nous voyons dans le navigateur est visuellement identique:

En définissant le format de fichier et les paramètres de qualité sur Automatic (F_auto, Q_Auto), Cloudinary est capable de détecter quels formats sont pris en charge par le client et sert le format le plus efficace à un niveau de qualité raisonnable. Dans Chrome, par exemple, cette image se transforme d'un JPG de 97,6 Ko en un WebP de 15,4 Ko, et tout ce que nous avions à faire était d'ajouter quelques choses à l'URL!

Nous pouvons transformer nos images de nombreuses manières différentes!

Nous pouvons aller plus loin avec d'autres transformations, y compris le redimensionnement (W_150 pour «redimensionner à 150px de large») et les effets de couleur (e_graycale pour «Appliquer l'effet de niveaux de gris»):

 https://res.coudinary.com/netlify/image/upload/q_auto,f_auto,w_150,e_graycale/v1605632851/explorers/avatar.jpg

Ce n'est qu'un petit goût de ce qui est possible - assurez-vous de cocher les documents cloudinary pour plus d'exemples!

Il y a un SDK de nœud pour rendre cela un peu plus lisible par l'homme

Pour des transformations plus avancées comme ce que nous allons entrer, écrire les URL à la main peut devenir un peu difficile à lire. Nous avons fini par utiliser le nœud incoudinaire que SDKTO nous donne la possibilité d'ajouter des commentaires et d'expliquer ce que faisait chaque transformation, et cela a été extrêmement utile lorsque nous maintenons et évoluons la plate-forme.

Pour l'installer, procurez-vous votre clé API Cloudinary et vous secret à partir de votreConsole, puis installez le SDK à l'aide de NPM:

 # Créer un nouveau répertoire
MKDIR CLOUNINAL-VIDEO

# Déplacez-vous dans le nouveau répertoire
CD Cloudinary-video /

# Initialiser un nouveau projet de nœud
npm init -y

# Installez le SDK du nœud cloudinary
NPM Installer Cloudinary

Ensuite, créez un nouveau fichier appeléIndex.jsand Initialisez le SDK avec les informations d'identification de l'API: YourCloud_Nameand:

 const Cloudinary = require ('cloudinary'). v2;

// TODO remplace ces valeurs par vos propres informations d'identification cloudinary
cloudinary.config ({
  cloud_name: 'your_cloud_name',
  api_key: 'your_api_key',
  api_secret: 'your_api_secret',
});

Ne commettez pas vos informations d'identification API à GitHub ou ne les partagez pas n'importe où. Utilisez des variables d'environnement pour les garder en sécurité! Si vous n'êtes pas familier avec les variables d'environnement, Colby Fayock a écrit une greatrintroduction à l'utilisation de variables d'environnement.

Ensuite, nous pouvons créer la même transformation qu'avant d'utiliser des paramètres de configuration légèrement plus lisibles par l'homme:

 cloudinary.uploader
  // Le premier argument devrait être l'ID public (y compris les dossiers!)
  // image que nous voulons transformer
  .Explicite ('explorateurs / avatar', {
    // Ces deux propriétés correspondent au début de l'URL:
    // https: //res.coudinary.com/netlify/image/upload / ...
    // ^^^^^^^^^^^^
    ressource_type: «image»,
    Type: «Téléchargement»,

    // "impatient" signifie que nous voulons exécuter ces transformations à l'avance pour éviter
    // un temps de charge lent au premier
    désireux: [
      {
        fetch_format: 'auto',
        Qualité: «Auto»,
        Largeur: 150,
        effet: «niveaux de gris»,
      },
    ],

    // permettez à cette image transformée d'être mise en cache pour éviter de réviser la même chose
    // transformations encore et encore
    Écraser: faux,
  })
  .Then ((result) => {
    console.log (résultat);
  });

Exécutons ce code en typingNode index.jsin notre terminal. La sortie ressemblera à ceci:

 {
  Asset_id: 'FCA4ABBA96FFDF70EF89498AA340AE4E',
  public_id: «explorateurs / avatar»,
  Version: 1605632851,
  Version_ID: 'B8A923931AF20404E89D03852FF1BFF1',
  Signature: 'E7201C9AB36CB5B6A0545CEE4F5F8EE27FB7F99F',
  Largeur: 300,
  hauteur: 300,
  Format: «JPG»,
  ressource_type: «image»,
  Created_at: '2020-11-17T17: 07: 31Z',
  octets: 97633,
  Type: «Téléchargement»,
  URL: 'http://res.coudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg',
  Secure_Url: 'https://res.coudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg',
  Access_Mode: «public»,
  désireux: [
    {
      Transformation: 'e_graycale, f_auto, q_auto, w_150',
      Largeur: 150,
      hauteur: 150,
      octets: 6192,
      Format: «JPG»,
      URL: 'http://res.coudinary.com/netlify/image/upload/e_grayscale,f_auto,q_auto,w_150/v1605632851/explorers/avatar.jpg',
      Secure_url: 'https://res.coudinary.com/netlify/image/upload/e_grayscale,f_auto,q_auto,w_150/v1605632851/explorers/avatar.jpg'
    }
  ]]
}

Sous TheAgerProperty, nos transformations sont affichées avec l'URL complète pour afficher l'image transformée.

Bien que le SDK du nœud soit probablement exagéré pour une transformation simple comme celle-ci, elle devient vraiment pratique lorsque nous commençons à regarder les transformations complexes nécessaires pour ajouter une marque vidéo.

Transformer les vidéos avec Cloudinary

Pour transformer nos vidéos dans les explorateurs de Jamstack, nous suivons la même approche: chaque vidéo est téléchargée sur Cloudinary, puis nous modifions les URL pour redimensionner, ajuster la qualité et insérer la carte de titre et les pare-chocs.

Il existe quelques grandes catégories de transformation que nous allons aborder pour ajouter la marque:

1. Superpositions
2. Transitions
3. Superpositions de texte
4. Épissage

Regardons chacune de ces catégories et voyons si nous ne pouvons pas réimplémenter la marque Jamstack Explorers sur la vidéo de Ben! Setttons en place en configurant upindex.jsto Transformer notre vidéo de base:

 cloudinary.uploader
  .Explicite ('explorateurs / pare-chocs', {
    // Ces deux propriétés correspondent au début de l'URL:
    // https: //res.coudinary.com/netlify/image/upload / ...
    // ^^^^^^^^^^^^
    ressource_type: «vidéo»,
   Type: «Téléchargement»,

    // "impatient" signifie que nous voulons exécuter ces transformations à l'avance pour éviter
    // un temps de charge lent au premier
    désireux: [
      {
        fetch_format: 'auto',
        Qualité: «Auto»,
        hauteur: 360,
        Largeur: 640,
        Crop: «remplissage», // Évitez les boîtes aux lettres si les vidéos sont différentes tailles
      },
    ],

    // permettez à cette image transformée d'être mise en cache pour éviter de réviser la même chose
    // transformations encore et encore
    Écraser: faux,
  })
  .Then ((result) => {
    console.log (résultat);
  });

Vous avez peut-être remarqué que nous utilisons une vidéo intitulée "Bumper" au lieu de la vidéo originale de Ben. Cela est dû à la façon dont Cloudinary Orde les vidéos à mesure que nous les additionnons. Nous ajouterons la vidéo de Ben dans la section suivante!

Combinez deux vidéos avec une transition personnalisée à l'aide de cloudinar

Pour ajouter nos pare-chocs, nous devons ajouter une deuxième «couche» de transformation à TheAgerArray qui ajoute une deuxième vidéo comme superposition.

Pour ce faire, nous utilisons TheOverlayTransformation et le définissons TOVIDEO: publicId, Whitepublicidis L'ID public cloudinary de l'actif avec toutes les barres obliques (/) transformées en Colons (:).

Nous devons également dire à Cloudinary comment passer entre les deux vidéos, que nous faisons en utilisant un type spécial de vidéo appelée Luma Matte qui nous permet de masquer une vidéo avec la zone noire de la vidéo, et une deuxième vidéo avec la zone blanche. Il en résulte un décalage transversal stylisé.

Voici à quoi ressemble le Matte Luma seul:

La vidéo et la transition ont toutes deux leurs propres transformations, ce qui signifie que nous devons les traiter comme différentes «couches» dans la transformation cloudinaire. Cela signifie les diviser en objets distincts, puis l'ajout d'objets supplémentaires pour «appliquer» chaque couche, ce qui nous permet d'appeler cette section effectuée et de continuer à ajouter plus de transformations à la vidéo principale.

Pour dire que Cloudinara c'est un luma mat et non une autre vidéo, nous définissons le Totransition d'effetType.

Apporter les modifications suivantes dans index.jsto mettez tout cela en place:

 const videoBasetRansformations = {
  fetch_format: 'auto',
  Qualité: «Auto»,
  hauteur: 360,
  Largeur: 600,
  Crop: «remplissage»,
}

cloudinary.uploader
  .Explicite ('explorateurs / pare-chocs', {
    // Ces deux propriétés correspondent au début de l'URL:
    // <https:></https:> ...
    //
    ressource_type: «vidéo»,
    Type: «Téléchargement»,

    // "impatient" signifie que nous voulons exécuter ces transformations à l'avance pour éviter
    // un temps de charge lent au premier
    désireux: [
      VideobaseTransformations,
      {
        superposition: «Vidéo: explorateurs: LCA-07-LifeCycle-Hooks»,
        ... VideobasetRansformations,
      },
      {
        superposition: «Vidéo: explorateurs: transition»,
        effet: «transition»,
      },
      {Flags: 'Layer_Apply'}, //  {
    console.log (résultat);
  });

Nous avons besoin du même format, de la même qualité et des transformations de dimensionnement sur toutes les vidéos, nous les avons donc retirées dans une variable appelée VideoBasetRansformations, puis ajouté un deuxième objet pour contenir la superposition.

Si nous exécutons ceci avec Node index.js, la vidéo que nous récupérons ressemble à ceci:

Pas mal! Cela semble déjà faire partie du site de Jamstack Explorers, et cette transition ajoute un joli flux du pare-chocs commun dans la vidéo personnalisée.

L'ajout du pare-chocs outro fonctionne exactement de la même manière: nous devons ajouter une autre superposition pour le pare-chocs de fin et une transition. Nous ne montrerons pas ce code dans le tutoriel, mais vous pouvez le voir dans le code source si vous êtes intéressé.

Ajouter une carte de titre à une vidéo à l'aide de superpositions de texte

Pour ajouter une carte de titre, il y a deux étapes distinctes:

1. Extraire un court clip vidéo pour servir de fond de carte de titre
2. Ajoutez une superposition de texte avec le titre de la vidéo

Les deux sections suivantes traversent chaque étape individuellement afin que nous puissions voir la distinction entre les deux.

Extraire un court clip vidéo à utiliser comme arrière-plan de la carte de titre

Quand Adam Hald a créé les actifs vidéo des explorateurs, il a inclus une vidéo d'introduction aboutissante ouverte sur un ciel étoilé parfait pour une carte de titre. En utilisant Cloudinary, nous pouvons saisir quelques secondes de ce ciel étoilé et le faire épiller dans chaque vidéo en tant que carte de titre!

Inindex.js, ajoutez les blocs de transformation suivants:

 cloudinary.uploader
  .Explicite ('explorateurs / pare-chocs', {
    // Ces deux propriétés correspondent au début de l'URL:
    // https: //res.coudinary.com/netlify/image/upload / ...
    //
    ressource_type: «vidéo»,
    Type: «Téléchargement»,

    // "impatient" signifie que nous voulons exécuter ces transformations à l'avance pour éviter
    // un temps de charge lent au premier
    désireux: [
      VideobaseTransformations,
      {
        superposition: «Vidéo: explorateurs: LCA-07-LifeCycle-Hooks»,
        ... VideobasetRansformations,
      },
      {
        superposition: «Vidéo: explorateurs: transition»,
        effet: «transition»,
      },
      {Flags: 'Layer_Apply'}, //  {
    console.log (résultat);
  });

En utilisant TheSpliceFlag, nous disons à Cloudinary d'ajouter cette vidéo directement sans transition.

Dans la prochaine série de transformations, nous ajoutons trois transformations que nous n'avons jamais vues auparavant:

1. Nous setAudio_Codectononeto supprime le son de ce segment de vidéo.
2. Nous définissons_offsetto3, ce qui signifie que nous n'aurons que les 3 premières secondes de la vidéo.
3. Nous ajoutons TheAccelerate Effect avec une valeur de 25, ce qui ralentit la vidéo de 25%.

RunningNode index.jswill nous donne maintenant une vidéo qui commence par un peu moins de 4 secondes de ciel étoilé silencieux:

Ajouter des superpositions de texte aux vidéos en utilisant le cloudin

Notre dernière étape consiste à ajouter une superposition de texte pour afficher le titre vidéo!

Les superpositions de texte utilisent le même OverlayProperty que d'autres superpositions, mais nous passons un objet avec des paramètres pour la police. Cloudinary prend en charge une grande variété de polices - je n'ai pas pu trouver de liste définitive, mais il semble que ce soit un grand nombre de polices Google - et si vous avez acheté une licence pour utiliser une police personnalisée, vous canalisez une police personnalisée à Cloudinary pour une utilisation dans des superpositions de texte.

 cloudinary.uploader
  .Explicite ('explorateurs / pare-chocs', {
    // Ces deux propriétés correspondent au début de l'URL:
    // <https:></https:> ...
    //
    ressource_type: «vidéo»,
    Type: «Téléchargement»,

    // "impatient" signifie que nous voulons exécuter ces transformations à l'avance pour éviter
    // un temps de charge lent au premier
    désireux: [
      VideobaseTransformations,
      {
        superposition: «Vidéo: explorateurs: LCA-07-LifeCycle-Hooks»,
        ... VideobasetRansformations,
      },
      {
        superposition: «Vidéo: explorateurs: transition»,
        effet: «transition»,
      },
      {Flags: 'Layer_Apply'}, //  {
    console.log (résultat);
  });

En plus de définir la taille et l'alignement de la police, nous appliquons également une largeur de 500px (qui sera centrée par défaut) pour empêcher notre texte de titre de se casser sur le côté de la carte de titre, et de définir le tofit de la valeur de la valeur, qui enveloppera les titres plus longs. Définition de la collaboration de notre texte visible sur le fond sombre et étoilé.

Runnode index.jsto génère l'URL et nous verrons notre vidéo entièrement de marque, y compris une carte de titre et des pare-chocs!

Créez votre marque vidéo une fois; Utilisez-le partout

La création de pare-chocs, de transitions et de cartes de titre est beaucoup de travail. La création de contenu vidéo de haute qualité est également beaucoup de travail. Si nous devions modifier manuellement chaque vidéo Jamstack Explorers pour insérer ces cartes de titre et ces pare-chocs, il est extrêmement improbable que nous l'aurions réellement fait.

Nous savions que la seule façon réaliste pour nous de garder les vidéos de marque constante a été la naissance de la friction de l'ajout de la marque, et cloudinara l'automatiser entièrement. Cela signifie que nous pouvons rester cohérents sans aucune étape manuelle!

En prime, cela signifie également que si nous mettons à jour nos cartes de titre ou nos pare-chocs à l'avenir, nous pouvons mettre à jour toute la marque de toutes les vidéos en modifiant le code en un seul endroit. C'est un énorme soulagement pour nous, car nous savons que les explorateurs vont continuer à grandir et à évoluer avec le temps.

Que faire ensuite

Maintenant que vous savez comment utiliser Cloudinary pour ajouter une marque personnalisée, voici quelques ressources supplémentaires pour vous aider à continuer d'apprendre.

• Voir ce code de source pour ce tutoriel.
• Voir le code Jamstack ExplorersSource pour la marque vidéo.
• En savoir plus sur les API de transformation vidéo de Cloudinary.
• Renseignez-vous sur le développement Web des explorateurs OnJamstack.
• Découvrez comment les images de médias sociaux personnalisées en utilisant le cloudinary.
• Regardez la mission complète de Ben pour voir comment tout cela se rassemble!

Que pouvez-vous automatiser d'autre en utilisant le cloudinary? Combien de temps pourriez-vous économiser en automatisant les parties répétitives de votre flux de travail d'édition vidéo? Je suis exactement le genre de nerd qui aime parler de ce genre de choses, alors envoyez-moi vos idées sur Twitter!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!