Wolkäre Tricks für Video

Das Erstellen von Videos ist zeitaufwändig. Ein gut gemachter 5-minütiges Video kann Stunden dauern, um zu planen, aufzunehmen und zu bearbeiten-und bevor wir darüber sprechen, dass dieses Video mit allen anderen Videos auf Ihrer Website übereinstimmt.

Als wir das Jamstack Explorers-Projekt (eine Video-gesteuerte Bildungsressource für Webentwickler) übernahmen, wollten wir die richtige Balance zwischen Qualität und Versand finden: Was könnten wir in unserem Videoproduktionsprozess automatisieren, um die Zeit und die Anzahl der erforderlichen Schritte zu verkürzen, um Videoinhalte zu erstellen, ohne Qualität zu beeinträchtigen?

Mit Hilfe des Cloudinary konnten wir in allen unseren Videoinhalten einen konsistenten Branding -Ansatz liefern, ohne eine Reihe zusätzlicher Bearbeitungsaufgaben für Leute zu fügen, die Videos erstellen. Und als Bonus können wir, wenn wir unser Branding in Zukunft aktualisieren, das gesamte Video -Branding auf der gesamten Website auf einmal aktualisieren - keine Videobearbeitung erforderlich!

Was bedeutet „Videomarking“?

Damit jedes Video auf der Sockers -Site das Gefühl hat, alles zusammenzupassen, enthalten wir in jedem Video einige gängige Stücke:

1. Eine Titelszene
2. Ein kurzer Intro -Stoßfänger (Videoclip), der das Branding von Jamstack Explorers zeigt
3. Ein kurzer Outro -Stoßfänger, der entweder auf das nächste Video abzählt oder eine „Mission erfüllt“ zeigt, wenn dies das letzte Video in der Mission ist

Überspringen Sie zum Ende: So sieht ein Markenvideo aus

Um die Auswirkungen des Hinzufügens des Brandings zu zeigen, finden Sie hier eines der Videos von Jamstack Explorers ohne Branding:

Dieses Video (und diese Mission von Ben Hong) ist rechtmäßig hervorragend! Es beginnt und endet jedoch ein wenig abrupt und wir haben kein Gefühl dafür, wo dieses Video lebt.

Wir haben mit Adam Hald zusammengearbeitet, um Markenvideo -Assets zu erstellen, die jedem Video ein Gefühl für einen Ort verleihen. Schauen Sie sich dasselbe Video mit allen angewandten Explorers -Branding an:

Wir bekommen den gleichen großartigen Inhalt, aber jetzt haben wir ein wenig mehr VA-VA-Voom hinzugefügt, was sich so anfühlt, als wäre es Teil einer größeren Geschichte.

In diesem Artikel gehen wir durch, wie wir jedes Video automatisch mit Cloudinary anpassen.

Wie macht Wolkinary dies möglich?

Cloudary ist ein Cloud-basierte Vermögensdeliefer-Netzwerk, das uns eine leistungsstarke URL-basierte API zur Manipulation und Transformation von Medien bietet. Es unterstützt alle möglichen Vermögenstypen, aber wo es wirklich leuchtet, ist mit Bildern und Videoen.

Um Cloudinary zu verwenden, laden Sie ein kostenloses Konto und laden Sie Ihr Asset hoch. Dieses Kapital wird dann bei einer Wolkin -URL verfügbar:

 https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                              | | |
                              VVV
                      Cloud (Konto) Name Version (optional) Dateiname

Diese URL verweist auf das Originalbild und kann in Tags und anderen Markups verwendet werden.

Passen Sie das Dateiformat und die Qualität dynamisch an, um die Dateigrößen zu reduzieren

Wenn wir dieses Bild auf einer Website verwenden und unsere Leistung auf der Website verbessern möchten, können wir uns entscheiden, die Größe dieses Bildes durch Verwendung von Formaten der nächsten Generation wie WebP, AVIF usw. zu verringern. Diese neuen Formate sind viel kleiner, werden jedoch nicht von allen Browsern unterstützt, was normalerweise bedeuten würde, dass mehrere Versionen dieses Bildes in verschiedenen Formaten generiert werden, und dann ein -Element oder ein anderes spezielles Markup verwenden, um moderne Optionen mit dem JPG -Fallback für ältere Browser zu bieten.

Mit wolkinärer müssen wir nur eine Transformation zur URL hinzufügen:

 https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto/v1605632851/explorers/avatar.jpg
                                                ^^^^^^^^^^^^^
                                                      |
                                                      V
                                    Automatische Qualitäts- und Formattransformationen

Was wir im Browser sehen, ist visuell identisch:

Durch Einstellen des Dateiformat- und Qualitätseinstellungen auf automatisch (F_Auto, q_auto) kann Cloudary erkennen, welche Formate vom Client unterstützt werden und das effizienteste Format auf angemessener Qualitätsniveau dient. In Chrome verwandelt sich dieses Bild beispielsweise von einem 97,6 KB JPG zu einem 15,4 -KB -Webp, und wir mussten nur ein paar Dinge in die URL hinzufügen!

Wir können unsere Bilder auf viele verschiedene Arten verwandeln!

Wir können weiter mit anderen Transformationen gehen, einschließlich der Größenänderung (W_150FOR „Größe auf 150px breit“) und Farbtoneffekten (e_grayscalefor „den Graustufeneffekt anwenden“):

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

Dies ist nur ein winziger Geschmack von dem, was möglich ist. Stellen Sie sicher, dass weitere Beispiele die wolkenden Dokumente auschecken!

Es gibt einen Knoten-SDK, der dies ein wenig menschlicher lesbarer macht

Für fortgeschrittenere Transformationen wie das, worauf wir uns einlassen, kann das Schreiben der URLs von Hand etwas schwer zu lesen sein. Am Ende haben wir den entdeckenden Knoten SDKTO verwendet, um Kommentare hinzuzufügen und zu erklären, was jede Transformation getan hat, und das war äußerst hilfreich, wenn wir die Plattform pflegen und weiterentwickeln.

Um es zu installieren, holen Sie sich Ihren Cloudinary -API -Schlüssel und geheim von YourConsole und installieren Sie das SDK mit NPM:

 # Erstellen Sie ein neues Verzeichnis
Mkdir Cloudary-Video

# In das neue Verzeichnis ziehen
CD Cloudinary-Video/

# Initialisieren Sie ein neues Knotenprojekt
npm init -y

# Installieren Sie den Cloudinary Node SDK
NPM Cloudary Installieren

Erstellen Sie als Nächstes eine neue Datei mit dem NamenIndex.jsand initialisieren Sie die SDK mit Ihrem Cloud_NameAn und API -Anmeldeinformationen:

 const Cloudinary = Request ('wolkinary'). v2;

// TODO ersetzen diese Werte durch Ihre eigenen Wolkinformationen
cloudinary.config ({{{{
  Cloud_name: 'your_cloud_name',
  api_key: 'your_api_key',
  api_secret: 'your_api_secret',
});

Verpflichten Sie Ihre API -Anmeldeinformationen nicht an GitHub oder teilen Sie sie überall weiter. Verwenden Sie Umgebungsvariablen, um sie zu schützen! Wenn Sie um Umgebungsvariablen nicht vertraut sind, hat Colby Fayock eine großartige Einführung in die Verwendung von Umgebungsvariablen geschrieben.

Als nächstes können wir die gleiche Transformation erstellen wie bevor sie etwas mehr menschlich lesbare Konfigurationseinstellungen verwenden:

 Cloudary.Uploader
  // Das erste Argument sollte die öffentliche ID (einschließlich Ordner!) Von der sein
  // Bild wollen wir transformieren
  .Explicit ('Explorers/Avatar', {
    // Diese beiden Eigenschaften stimmen mit dem Beginn der URL überein:
    // https: //res.cloudinary.com/netlify/image/upload/...
    // ^^^^^^^^^^^^^
    Ressourcen_Type: 'Bild',
    Typ: 'Upload',

    // "eifrig" bedeutet, dass wir diese Transformationen im Voraus ausführen wollen, um sie zu vermeiden
    // eine langsame erste Ladezeit
    erpicht: [
      {
        Fetch_Format: 'Auto',,
        Qualität: 'Auto',
        Breite: 150,
        Effekt: 'Graustufen',
      },
    ],

    // Lassen Sie dieses transformierte Bild zwischengespeichert
    // Transformationen immer und immer wieder
    überschreiben: Falsch,
  })
  .then ((Ergebnis) => {
    console.log (Ergebnis);
  });

Führen Sie diesen Code durch typingNode index.jsin unser Terminal aus. Die Ausgabe sieht ungefähr so ​​aus:

 {
  Asset_ID: 'FCA4ABBA96FFDF70EF89498AA340AE4E',
  public_id: 'explorers/avatar',
  Version: 1605632851,
  Version_ID: 'B8A923931AF20404E89D03852FF1BFF1',
  Signatur: 'E7201C9AB36CB5B6A0545CEE4F5F8EE27FB7F99F',
  Breite: 300,
  Höhe: 300,
  Format: 'JPG',
  Ressourcen_Type: 'Bild',
  erstellt_at: '2020-11-17t17: 07: 31z',,
  Bytes: 97633,
  Typ: 'Upload',
  URL: 'http://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg',,
  Secure_url: 'https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg',,
  Access_mode: 'public',
  erpicht: [
    {
      Transformation: 'e_grayscale, f_auto, q_auto, w_150',
      Breite: 150,
      Höhe: 150,
      Bytes: 6192,
      Format: 'JPG',
      URL: 'http://res.cloudinary.com/netlify/image/upload/e_grayscale,f_auto,q_auto ,w_150/v1605632851/explorers/avatar.jpg',,
      Secure_url: 'https://res.cloudinary.com/netlify/image/upload/e_grayscale,f_auto,q_auto ,w_150/v1605632851/explorers/avatar.jpg' '
    }
  ]
}

Unter TheAgerProperty werden unsere Transformationen zusammen mit der vollständigen URL gezeigt, um das transformierte Bild anzuzeigen.

Während der Knoten SDK wahrscheinlich für eine einfache Transformation wie diese übertrieben ist, wird er sehr praktisch, wenn wir uns die komplexen Transformationen ansehen, die erforderlich sind, um das Videomarken hinzuzufügen.

Videos mit Wolkendern transformieren

Um unsere Videos in JamStack Explorers zu transformieren, folgen wir demselben Ansatz: Jedes Video wird auf Cloudinary hochgeladen. Anschließend modifizieren wir die URLs, um die Größe zu ändern, die Qualität anzupassen und die Titelkarte und die Stoßfänger einzufügen.

Es gibt einige wichtige Kategorien von Transformationen, die wir angehen werden, um das Branding hinzuzufügen:

1. Overlays
2. Übergänge
3. Textüberlagerungen
4. Spleißen

Schauen wir uns jede dieser Kategorien an und sehen, ob wir das Branding von Jamstack Explorers auf Bens Video nicht neu implementieren können! Lassen Sie uns eingerichtet, indem wir index.jsto einrichten. Transformieren Sie unser Basisvideo:

 Cloudary.Uploader
  .Explicit ('Explorers/Stoßfänger', {
    // Diese beiden Eigenschaften stimmen mit dem Beginn der URL überein:
    // https: //res.cloudinary.com/netlify/image/upload/...
    // ^^^^^^^^^^^^^
    Ressourcen_Type: 'Video',,
   Typ: 'Upload',

    // "eifrig" bedeutet, dass wir diese Transformationen im Voraus ausführen wollen, um sie zu vermeiden
    // eine langsame erste Ladezeit
    erpicht: [
      {
        Fetch_Format: 'Auto',,
        Qualität: 'Auto',
        Höhe: 360,
        Breite: 640,
        Ernte: 'Füllung', // Vermeiden Sie Briefkasten, wenn Videos unterschiedliche Größen haben
      },
    ],

    // Lassen Sie dieses transformierte Bild zwischengespeichert
    // Transformationen immer und immer wieder
    überschreiben: Falsch,
  })
  .then ((Ergebnis) => {
    console.log (Ergebnis);
  });

Möglicherweise haben Sie festgestellt, dass wir ein Video namens „Stoßfänger“ anstelle von Bens Originalvideo verwenden. Dies liegt an der Art und Weise, wie Wolfsanordnungsvideos, wenn wir sie zusammen hinzufügen. Wir werden Bens Video im nächsten Abschnitt hinzufügen!

Kombinieren Sie zwei Videos mit einem benutzerdefinierten Übergang mit Cloudary

Um unsere Stoßstangen hinzuzufügen, müssen wir TheeAgerArray eine zweite Transformation „Layer“ hinzufügen, die ein zweites Video als Overlay hinzufügt.

Dazu verwenden wir TheoverlayTransformation und setzen sie toVideo: publicid, wo publicidis die wolkende öffentliche ID des Vermögenswerts mit allen Schrägstrichen (/) in Kolonen (:) verwandelt wird.

Wir müssen auch Cloudinary erkennen, wie man zwischen den beiden Videos übergeht, die wir mit einer speziellen Art von Video namens Luma Matte durchführen, mit der wir ein Video mit dem schwarzen Bereich des Videos und einem zweiten Video mit dem weißen Bereich maskieren können. Dies führt zu einem stilisierten Kreuzvertreter.

So sieht die Luma Matte für sich aus:

Das Video und der Übergang haben beide ihre eigenen Transformationen, was bedeutet, dass wir sie als unterschiedliche „Schichten“ in der Wolkendransformation behandeln müssen. Dies bedeutet, sie in separate Objekte aufzuteilen und dann zusätzliche Objekte hinzuzufügen, um jede Ebene zu „anwenden“, sodass wir diesen Abschnitt erledigt und weiterhin mehr Transformationen zum Hauptvideo hinzufügen können.

Um Cloudinary zu sagen, dass dies ein Luma -Matt und kein weiteres Video ist, setzen wir die Effectype -Totransition.

Nehmen Sie die folgenden Änderungen vor Index.jsto stellen all dies ein:

 const videobasetransformations = {
  Fetch_Format: 'Auto',,
  Qualität: 'Auto',
  Höhe: 360,
  Breite: 600,
  Ernte: 'Füllung',
}

Cloudary.Uploader
  .Explicit ('Explorers/Stoßfänger', {
    // Diese beiden Eigenschaften stimmen mit dem Beginn der URL überein:
    // <https:></https:> ...
    //
    Ressourcen_Type: 'Video',,
    Typ: 'Upload',

    // "eifrig" bedeutet, dass wir diese Transformationen im Voraus ausführen wollen, um sie zu vermeiden
    // eine langsame erste Ladezeit
    erpicht: [
      Videobasetransformationen,
      {
        Overlay: 'Video: Explorers: LCA-07-LIFECYCLE-Hooks',
        ... Videobasetransformationen,
      },
      {
        Overlay: 'Video: Explorers: Übergang',
        Effekt: 'Übergang',
      },
      {Flags: 'layer_apply'}, //  {
    console.log (Ergebnis);
  });

Wir benötigen das gleiche Format, die gleiche Qualität und die Größe von Transformationen in allen Videos, sodass wir diese in eine Variable namens VideoBasetRansformations herausgezogen haben, und dann ein zweites Objekt hinzugefügt, um die Überlagerung zu enthalten.

Wenn wir dies mit node index.js ausführen, sieht das Video, das wir zurückbekommen, so aus:

Nicht schlecht! Dies sieht bereits so aus, als wäre es Teil der Jamstack Explorers -Website, und dieser Übergang fügt einen schönen Fluss aus dem gemeinsamen Stoßfänger in das benutzerdefinierte Video hinzu.

Das Hinzufügen des Outro -Stoßfängers funktioniert genau gleich: Wir müssen ein weiteres Overlay für den endenden Stoßfänger und einen Übergang hinzufügen. Wir werden diesen Code nicht im Tutorial zeigen, aber Sie können ihn im Quellcode sehen, wenn Sie interessiert sind.

Fügen Sie einem Video mit Textüberlagerungen eine Titelkarte hinzu

Um eine Titelkarte hinzuzufügen, gibt es zwei verschiedene Schritte:

1. Extrahieren Sie einen kurzen Videoclip, um als Titelkartenhintergrund zu dienen
2. Fügen Sie mit dem Titel des Videos eine Textüberlagerung hinzu

Die nächsten beiden Abschnitte gehen einzeln durch jeden Schritt, sodass wir die Unterscheidung zwischen beiden sehen können.

Extrahieren Sie einen kurzen Videoclip, der als Titelkartenhintergrund verwendet wird

Als Adam Hald die Video -Vermögenswerte für Explorers erstellte, schloss er ein, dass ein abautifuler Intro -Videothat einen Sternenhimmel öffnet, der perfekt für eine Titelkarte ist. Mit Cloudary können wir ein paar Sekunden dieses Sternenhimmels schnappen und ihn als Titelkarte in jedes Video einspeisen!

Index.js fügen Sie die folgenden Transformationsblöcke hinzu:

 Cloudary.Uploader
  .Explicit ('Explorers/Stoßfänger', {
    // Diese beiden Eigenschaften stimmen mit dem Beginn der URL überein:
    // https: //res.cloudinary.com/netlify/image/upload/...
    //
    Ressourcen_Type: 'Video',,
    Typ: 'Upload',

    // "eifrig" bedeutet, dass wir diese Transformationen im Voraus ausführen wollen, um sie zu vermeiden
    // eine langsame erste Ladezeit
    erpicht: [
      Videobasetransformationen,
      {
        Overlay: 'Video: Explorers: LCA-07-LIFECYCLE-Hooks',
        ... Videobasetransformationen,
      },
      {
        Overlay: 'Video: Explorers: Übergang',
        Effekt: 'Übergang',
      },
      {Flags: 'layer_apply'}, //  {
    console.log (Ergebnis);
  });

Mit der THEPLICEFLAG geben wir Cloudary an, dieses Video direkt ohne Übergang hinzuzufügen.

Im nächsten Satz von Transformationen fügen wir drei Transformationen hinzu, die wir zuvor noch nicht gesehen haben:

1. Wir setAudio_Codectononeto entfernen Sie Sound aus diesem Videosegment.
2. Wir setend_offsetto3, was bedeutet, dass wir nur die ersten 3 Sekunden des Videos erhalten.
3. Wir fügen die TheAccelerateEffect mit einem Wert von 25 hinzu, der das Video um 25%verlangsamt.

RunningNode Index.jsWill jetzt geben Sie uns ein Video, das mit knapp 4 Sekunden stille, sternenklaren Himmel beginnt:

Fügen Sie Textüberlagerungen zu Videos mit Cloudary hinzu

Unser letzter Schritt ist es, eine Textüberlagerung hinzuzufügen, um den Videotitel anzuzeigen!

Textüberlagerungen verwenden die gleiche OverlayProperty wie andere Overlays, aber wir übergeben ein Objekt mit Einstellungen für die Schriftart. Cloudary unterstützt eine Vielzahl von Schriftarten - ich konnte keine endgültige Liste finden, aber es scheint eine große Anzahl von Google -Schriftarten zu sein -, und wenn Sie eine Lizenz für die Verwendung einer benutzerdefinierten Schriftart gekauft haben, können Sie eine benutzerdefinierte Schriftart in Cloudary für die Verwendung in Textüberlagerungen gut beladen.

 Cloudary.Uploader
  .Explicit ('Explorers/Stoßfänger', {
    // Diese beiden Eigenschaften stimmen mit dem Beginn der URL überein:
    // <https:></https:> ...
    //
    Ressourcen_Type: 'Video',,
    Typ: 'Upload',

    // "eifrig" bedeutet, dass wir diese Transformationen im Voraus ausführen wollen, um sie zu vermeiden
    // eine langsame erste Ladezeit
    erpicht: [
      Videobasetransformationen,
      {
        Overlay: 'Video: Explorers: LCA-07-LIFECYCLE-Hooks',
        ... Videobasetransformationen,
      },
      {
        Overlay: 'Video: Explorers: Übergang',
        Effekt: 'Übergang',
      },
      {Flags: 'layer_apply'}, //  {
    console.log (Ergebnis);
  });

Neben der Festlegung der Schriftgröße und -ausrichtung wenden wir auch eine Breite von 500 PX (die standardmäßig zentriert werden) an, um zu verhindern, dass unser Titeltext in die Seite der Titelkarte eindringt, und das Schleifvalue -Tofit einstellen, das längere Titel einpackt. Setzen Sie TheColortowhitemakes unseren Text sichtbar vor dem dunklen, sternenklaren Hintergrund.

Runnode Index.jsto generieren die URL und wir werden unser vollständig Markenvideo sehen, einschließlich einer Titelkarte und Stoßstangen!

Erstellen Sie einmal Ihr Videomarken. benutze es überall

Das Erstellen von Stoßstangen, Übergängen und Titelkarten ist eine Menge Arbeit. Das Erstellen hochwertiger Videoinhalte ist auch viel Arbeit. Wenn wir jedes Jamstack Explorers -Video manuell bearbeiten müssten, um diese Titelkarten und Stoßfänger einzufügen, ist es äußerst unwahrscheinlich, dass wir es tatsächlich getan hätten.

Wir wussten, dass die einzig realistische Möglichkeit für uns, die Videos konsequent zu halten, die Reibung des Brandings hinzugefügt und cloudinary es vollständig automatisieren lassen. Dies bedeutet, dass wir ohne manuelle Schritte konsistent bleiben können!

Als zusätzlichen Bonus bedeutet dies auch , dass wir, wenn wir in Zukunft unsere Titelkarten oder Stoßstangen aktualisieren, das gesamte Branding für alle Videos aktualisieren können, indem wir den Code an einem Ort ändern. Dies ist eine große Erleichterung für uns, da wir wissen, dass Entdecker im Laufe der Zeit weiter wachsen und weiterentwickeln werden.

Was ist als nächstes zu tun?

Nachdem Sie nun wissen, wie Sie Cloudinary verwenden, um ein benutzerdefiniertes Branding hinzuzufügen, finden Sie hier einige zusätzliche Ressourcen, mit denen Sie weiterhin lernen können.

• Sehen Sie den Code für dieses Tutorial an.
• Sehen Sie sich den Jamstack ExplorersSource -Code für Videomarking an.
• Erfahren Sie mehr über die Video -Transformations -APIs von Cloudinary.
• Erfahren Sie mehr über Webentwicklung Onjamstack Explorers.
• Erfahren Sie, wie benutzerdefinierte Social -Media -Bilder mit Cloudinary tocreate tocreate.
• Beobachten Sie Bens volles Mission, um zu sehen, wie es alles zusammenkommt!

Was können Sie mit Cloudary noch automatisieren? Wie viel Zeit können Sie sparen, indem Sie die sich wiederholenden Teile Ihres Videobearbeitungs -Workflows automatisieren? Ich bin genau die Art von Nerd, die gerne über dieses Zeug spricht. Senden Sie mir also Ihre Ideen auf Twitter!

Das obige ist der detaillierte Inhalt vonWolkäre Tricks für Video. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!