Die Erstellung von Videos ist zeitaufwendig. Ein gut gemachtes 5-minütiges Video kann Stunden für Planung, Aufnahme und Bearbeitung dauern – und das, *bevor* wir überhaupt darüber sprechen, dieses Video mit allen anderen Videos auf Ihrer Website konsistent zu machen.
Als wir das Jamstack Explorers Projekt (eine videogesteuerte Bildungsressource für Webentwickler) übernahmen, wollten wir die richtige Balance zwischen Qualität und Veröffentlichung finden: Was konnten wir in unserem Videoproduktionsprozess automatisieren, um die Zeit und die Anzahl der Schritte zur Erstellung von Videoinhalten zu reduzieren, ohne die Qualität zu beeinträchtigen?
Mit Hilfe von Cloudinary konnten wir einen konsistenten Markenansatz in all unseren Videoinhalten liefern, ohne dass die für die Erstellung von Videos zuständigen Personen zusätzliche Bearbeitungsaufgaben übernehmen mussten. Und als Bonus: Wenn wir unser Branding in Zukunft ändern, können wir das gesamte Video-Branding auf der gesamten Website auf einmal aktualisieren – ganz ohne Videobearbeitung!
Was bedeutet „Video-Branding“?
Damit sich jedes Video auf der Explorers-Website zusammengehörig anfühlt, fügen wir jedem Video einige gemeinsame Elemente hinzu
- Eine Titelszene
- Ein kurzer Intro-Bumper (Videoclip), der das Jamstack Explorers-Branding zeigt
- Ein kurzer Outro-Bumper, der entweder zum nächsten Video herunterzählt oder „Mission accomplished“ anzeigt, wenn dies das letzte Video in der Mission ist
Springen zum Ende: So sieht ein gebrandetes Video aus
Um die Auswirkung der Hinzufügung des Brandings zu zeigen, hier ist eines der Videos von Jamstack Explorers *ohne* jegliches Branding
Dieses Video (und diese Vue Mission von Ben Hong) ist wirklich herausragend! Allerdings beginnt und endet es etwas abrupt, und wir haben keine Vorstellung, wo dieses Video angesiedelt ist.
Wir haben mit Adam Hald zusammengearbeitet, um gebrandete Video-Assets zu erstellen, die jedem Video einen Sinn für seinen Platz geben. Sehen Sie sich dasselbe Video mit dem gesamten Explorers-Branding an
Wir bekommen denselben großartigen Inhalt, aber jetzt haben wir ein kleines Extra an Wow-Faktor hinzugefügt, das es wie einen Teil einer größeren Geschichte wirken lässt.
In diesem Artikel werden wir Schritt für Schritt erläutern, wie wir jedes Video automatisch mit Cloudinary anpassen.
Wie macht Cloudinary das möglich?
Cloudinary ist ein Cloud-basiertes Asset-Liefernetzwerk, das uns eine leistungsstarke, URL-basierte API zur Manipulation und Transformation von Medien bietet. Es unterstützt alle Arten von Assets, aber seine wahre Stärke liegt in Bildern und Videos.
Um Cloudinary zu nutzen, erstellen Sie ein kostenloses Konto und laden Sie dann Ihr Asset hoch. Dieses Asset ist dann über eine Cloudinary-URL verfügbar
https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg
^^^^^^^ ^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^
| | |
V V V
cloud (account) name version (optional) file nameDiese URL verweist auf das Originalbild und kann in <img /> -Tags und anderer Markup verwendet werden.
Dateiformat und Qualität dynamisch anpassen, um Dateigrößen zu reduzieren
Wenn wir dieses Bild auf einer Website verwenden und unsere Website-Performance verbessern wollen, können wir uns entscheiden, die Größe dieses Bildes zu reduzieren, indem wir Formate der nächsten Generation wie WebP, AVIF usw. verwenden. Diese neuen Formate sind viel kleiner, werden aber nicht von allen Browsern unterstützt, was normalerweise bedeuten würde, ein Werkzeug zu verwenden, um mehrere Versionen dieses Bildes in verschiedenen Formaten zu generieren, dann ein <picture> -Element oder ein anderes spezialisiertes Markup zu verwenden, um moderne Optionen mit dem JPG-Fallback für ältere Browser bereitzustellen.
Mit Cloudinary 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
automatic quality & format transformations
Was wir im Browser sehen, ist visuell identisch
Durch die automatische Einstellung des Dateiformats und der Qualität (f_auto,q_auto) kann Cloudinary erkennen, welche Formate vom Client unterstützt werden, und liefert das effizienteste Format in angemessener Qualität. In Chrome zum Beispiel wird dieses Bild von einem 97,6 KB großen JPG zu einem 15,4 KB großen WebP transformiert, und alles, was wir tun mussten, war, ein paar Dinge zur URL hinzuzufügen!
Wir können unsere Bilder auf viele verschiedene Arten transformieren!
Wir können noch weiter gehen mit anderen Transformationen, einschließlich Größenänderung (w_150 für „Größe auf 150px Breite ändern“) und Farbeffekten (e_grayscale für „Graustufen-Effekt anwenden“)
https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto,w_150,e_grayscale/v1605632851/explorers/avatar.jpg
Dies ist nur ein kleiner Vorgeschmack auf das, was möglich ist – schauen Sie sich unbedingt die Cloudinary-Dokumentation für weitere Beispiele an!
Es gibt ein Node-SDK, um dies etwas lesbarer zu machen
Für fortgeschrittenere Transformationen, wie wir sie noch behandeln werden, kann das manuelle Schreiben von URLs etwas schwierig zu lesen sein. Wir haben das Cloudinary Node SDK verwendet, um uns die Möglichkeit zu geben, Kommentare hinzuzufügen und zu erklären, was jede Transformation tut. Das hat sich als äußerst hilfreich erwiesen, da wir die Plattform pflegen und weiterentwickeln.
Um es zu installieren, holen Sie sich Ihren Cloudinary API-Schlüssel und Ihr Geheimnis aus Ihrer Konsole und installieren Sie dann das SDK mit npm
# create a new directory
mkdir cloudinary-video
# move into the new directory
cd cloudinary-video/
# initialize a new Node project
npm init -y
# install the Cloudinary Node SDK
npm install cloudinaryErstellen Sie als Nächstes eine neue Datei namens index.js und initialisieren Sie das SDK mit Ihrem cloud_name und Ihren API-Anmeldeinformationen
const cloudinary = require('cloudinary').v2;
// TODO replace these values with your own Cloudinary credentials
cloudinary.config({
cloud_name: 'your_cloud_name',
api_key: 'your_api_key',
api_secret: 'your_api_secret',
});Commiten Sie Ihre API-Anmeldeinformationen NICHT auf GitHub und geben Sie sie nirgendwo weiter. Verwenden Sie Umgebungsvariablen, um sie sicher aufzubewahren! Wenn Sie mit 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 wie zuvor mit etwas lesbareren Konfigurationseinstellungen erstellen
cloudinary.uploader
// the first argument should be the public ID (including folders!) of the
// image we want to transform
.explicit('explorers/avatar', {
// these two properties match the beginning of the URL:
// https://res.cloudinary.com/netlify/image/upload/...
// ^^^^^^^^^^^^
resource_type: 'image',
type: 'upload',
// "eager" means we want to run these transformations ahead of time to avoid
// a slow first load time
eager: [
{
fetch_format: 'auto',
quality: 'auto',
width: 150,
effect: 'grayscale',
},
],
// allow this transformed image to be cached to avoid re-running the same
// transformations over and over again
overwrite: false,
})
.then((result) => {
console.log(result);
});Lassen Sie uns diesen Code ausführen, indem wir in unserem Terminal node index.js eingeben. Die Ausgabe wird ungefähr so aussehen
{
asset_id: 'fca4abba96ffdf70ef89498aa340ae4e',
public_id: 'explorers/avatar',
version: 1605632851,
version_id: 'b8a923931af20404e89d03852ff1bff1',
signature: 'e7201c9ab36cb5b6a0545cee4f5f8ee27fb7f99f',
width: 300,
height: 300,
format: 'jpg',
resource_type: 'image',
created_at: '2020-11-17T17:07:31Z',
bytes: 97633,
type: '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',
eager: [
{
transformation: 'e_grayscale,f_auto,q_auto,w_150',
width: 150,
height: 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 der eager -Eigenschaft werden unsere Transformationen zusammen mit der vollständigen URL zur Anzeige des transformierten Bildes angezeigt.
Während das Node SDK für eine einfache Transformation wie diese wahrscheinlich übertrieben ist, wird es *wirklich* nützlich, wenn wir uns die komplexen Transformationen ansehen, die für das Hinzufügen von Video-Branding erforderlich sind.
Videos mit Cloudinary transformieren
Um unsere Videos in Jamstack Explorers zu transformieren, folgen wir dem gleichen Ansatz: Jedes Video wird in Cloudinary hochgeladen, und dann modifizieren wir die URLs, um die Größe zu ändern, die Qualität anzupassen und die Titeltafel und die Bumper einzufügen.
Es gibt ein paar Hauptkategorien von Transformationen, die wir zur Verfügung stellen werden, um das Branding hinzuzufügen
- Overlays
- Übergänge
- Text-Overlays
- Splicing
Schauen wir uns jede dieser Kategorien an und sehen, ob wir das Jamstack Explorers-Branding auf Bens Video neu implementieren können! Beginnen wir damit, index.js einzurichten, um unser Basisvideo zu transformieren
cloudinary.uploader
.explicit('explorers/bumper', {
// these two properties match the beginning of the URL:
// https://res.cloudinary.com/netlify/image/upload/...
// ^^^^^^^^^^^^
resource_type: 'video',
type: 'upload',
// "eager" means we want to run these transformations ahead of time to avoid
// a slow first load time
eager: [
{
fetch_format: 'auto',
quality: 'auto',
height: 360,
width: 640,
crop: 'fill', // avoid letterboxing if videos are different sizes
},
],
// allow this transformed image to be cached to avoid re-running the same
// transformations over and over again
overwrite: false,
})
.then((result) => {
console.log(result);
});Sie haben vielleicht bemerkt, dass wir ein Video namens „bumper“ anstelle von Bens Originalvideo verwenden. Dies liegt daran, wie Cloudinary Videos ordnet, wenn wir sie zusammenfügen. Wir werden Bens Video im nächsten Abschnitt hinzufügen!
Kombinieren Sie zwei Videos mit einem benutzerdefinierten Übergang mit Cloudinary
Um unsere Bumper hinzuzufügen, müssen wir dem eager -Array eine zweite Transformations-"Ebene" hinzufügen, die ein zweites Video als Overlay einfügt.
Dazu verwenden wir die overlay -Transformation und setzen sie auf video:publicID, wobei publicID die Cloudinary-Public-ID des Assets ist, bei dem Schrägstriche (/) durch Doppelpunkte (:) ersetzt wurden.
Wir müssen Cloudinary auch mitteilen, wie zwischen den beiden Videos übergeblendet werden soll. Dies geschieht mit einer speziellen Art von Video, einem Luma-Matte, das es uns ermöglicht, ein Video mit dem schwarzen Bereich des Videos und ein zweites Video mit dem weißen Bereich zu maskieren. Dies ergibt einen stilisierten Crossfade.
So sieht die Luma-Matte isoliert aus
Das Video und der Übergang haben beide ihre eigenen Transformationen, was bedeutet, dass wir sie als verschiedene „Ebenen“ in der Cloudinary-Transformation behandeln müssen. Dies bedeutet, sie in separate Objekte aufzuteilen und dann zusätzliche Objekte hinzuzufügen, um jede Ebene „anzuwenden“. Das erlaubt uns, diesen Abschnitt als erledigt zu betrachten und mit weiteren Transformationen für das Hauptvideo fortzufahren.
Um Cloudinary mitzuteilen, dass es sich um eine Luma-Matte und nicht um ein weiteres Video handelt, setzen wir den effect -Typ auf transition.
Nehmen Sie die folgenden Änderungen in index.js vor, um all dies umzusetzen
const videoBaseTransformations = {
fetch_format: 'auto',
quality: 'auto',
height: 360,
width: 600,
crop: 'fill',
}
cloudinary.uploader
.explicit('explorers/bumper', {
// these two properties match the beginning of the URL:
// <https://res.cloudinary.com/netlify/image/upload/>...
//
resource_type: 'video',
type: 'upload',
// "eager" means we want to run these transformations ahead of time to avoid
// a slow first load time
eager: [
videoBaseTransformations,
{
overlay: 'video:explorers:LCA-07-lifecycle-hooks',
...videoBaseTransformations,
},
{
overlay: 'video:explorers:transition',
effect: 'transition',
},
{ flags: 'layer_apply' }, // <= apply the transformation
{ flags: 'layer_apply' }, // <= apply the actual video
],
// allow this transformed image to be cached to avoid re-running the same
// transformations over and over again
overwrite: false,
})
.then((result) => {
console.log(result);
});Wir benötigen das gleiche Format, die gleiche Qualität und die gleichen Größenanpassungstransformationen für alle Videos. Deshalb haben wir diese in eine Variable namens videoBaseTransformations extrahiert und dann ein zweites Objekt hinzugefügt, um das Overlay zu enthalten.
Wenn wir dies mit node index.js ausführen, sieht das Video, das wir zurückbekommen, so aus
Nicht schlecht! Das sieht schon so aus, als wäre es Teil der Jamstack Explorers-Website, und der Übergang sorgt für einen schönen Fluss vom gemeinsamen Bumper zum benutzerdefinierten Video.
Das Hinzufügen des Outro-Bumpers funktioniert exakt gleich: Wir müssen ein weiteres Overlay für den End-Bumper und einen Übergang hinzufügen. Wir werden diesen Code im Tutorial nicht zeigen, aber Sie können ihn im Quellcode einsehen, wenn Sie interessiert sind.
Fügen Sie einem Video mit Text-Overlays eine Titeltafel hinzu
Um eine Titeltafel hinzuzufügen, sind zwei separate Schritte erforderlich
- Extrahieren Sie einen kurzen Videoclip, der als Hintergrund für die Titeltafel dient
- Fügen Sie eine Text-Überlagerung mit dem Titel des Videos hinzu
Die nächsten beiden Abschnitte gehen jeden Schritt einzeln durch, damit wir die Unterscheidung zwischen den beiden erkennen können.
Extrahieren Sie einen kurzen Videoclip als Hintergrund für die Titeltafel
Als Adam Hald die Video-Assets für Explorers erstellte, fügte er ein wunderschönes Intro-Video ein, das auf einem Sternenhimmel beginnt und sich perfekt für eine Titeltafel eignet. Mit Cloudinary können wir ein paar Sekunden dieses Sternenhimmels greifen und in jedes Video als Titeltafel einfügen!
Fügen Sie in index.js die folgenden Transformationsblöcke hinzu
cloudinary.uploader
.explicit('explorers/bumper', {
// these two properties match the beginning of the URL:
// https://res.cloudinary.com/netlify/image/upload/...
//
resource_type: 'video',
type: 'upload',
// "eager" means we want to run these transformations ahead of time to avoid
// a slow first load time
eager: [
videoBaseTransformations,
{
overlay: 'video:explorers:LCA-07-lifecycle-hooks',
...videoBaseTransformations,
},
{
overlay: 'video:explorers:transition',
effect: 'transition',
},
{ flags: 'layer_apply' }, // <= apply the transformation
{ flags: 'layer_apply' }, // <= apply the actual video
// add the outro bumper and a transition
{
overlay: 'video:explorers:countdown',
...videoBaseTransformations,
},
{
overlay: 'video:explorers:transition',
effect: 'transition',
},
{ flags: 'layer_apply' },
{ flags: 'layer_apply' },
// splice a title card at the beginning of the video
{
overlay: 'video:explorers:intro',
flags: 'splice', // splice this into the video
...videoBaseTransformations,
},
{
audio_codec: 'none', // remove the audio
end_offset: 3, // shorten to 3 seconds
effect: 'accelerate:-25', // slow down 25% (to ~4 seconds)
},
{
flags: 'layer_apply',
start_offset: 0, // put this at the beginning of the video
},
],
// allow this transformed image to be cached to avoid re-running the same
// transformations over and over again
overwrite: false,
})
.then((result) => {
console.log(result);
});Mit dem Flag splice weisen wir Cloudinary an, dieses Video direkt ohne Übergang hinzuzufügen.
In der nächsten Reihe von Transformationen fügen wir drei bisher unbekannte Transformationen hinzu
- Wir setzen
audio_codecaufnone, um den Ton aus diesem Videosegment zu entfernen. - Wir setzen
end_offsetauf3, was bedeutet, dass wir nur die ersten 3 Sekunden des Videos erhalten. - Wir fügen den Effekt
acceleratemit einem Wert von-25hinzu, was das Video um 25 % verlangsamt.
Wenn Sie node index.js ausführen, erhalten Sie nun ein Video, das mit knapp 4 Sekunden stummem, sternenklarem Himmel beginnt
Fügen Sie Videos mit Cloudinary Text-Overlays hinzu
Unser letzter Schritt ist das Hinzufügen einer Text-Überlagerung, um den Videotitel anzuzeigen!
Text-Overlays verwenden die gleiche overlay -Eigenschaft wie andere Overlays, aber wir übergeben ein Objekt mit Einstellungen für die Schriftart. Cloudinary unterstützt eine große Vielfalt an Schriftarten – ich konnte keine definitive Liste finden, aber es scheint eine große Anzahl von Google Fonts zu sein – und wenn Sie eine Lizenz zum Verwenden einer benutzerdefinierten Schriftart erworben haben, können Sie eine benutzerdefinierte Schriftart in Cloudinary hochladen, um sie in Text-Overlays zu verwenden .
cloudinary.uploader
.explicit('explorers/bumper', {
// these two properties match the beginning of the URL:
// <https://res.cloudinary.com/netlify/image/upload/>...
//
resource_type: 'video',
type: 'upload',
// "eager" means we want to run these transformations ahead of time to avoid
// a slow first load time
eager: [
videoBaseTransformations,
{
overlay: 'video:explorers:LCA-07-lifecycle-hooks',
...videoBaseTransformations,
},
{
overlay: 'video:explorers:transition',
effect: 'transition',
},
{ flags: 'layer_apply' }, // <= apply the transformation
{ flags: 'layer_apply' }, // <= apply the actual video
// add the outro bumper and a transition
{
overlay: 'video:explorers:countdown',
...videoBaseTransformations,
},
{
overlay: 'video:explorers:transition',
effect: 'transition',
},
{ flags: 'layer_apply' },
{ flags: 'layer_apply' },
// splice a title card at the beginning of the video
{
overlay: 'video:explorers:intro',
flags: 'splice', // splice this into the video
...videoBaseTransformations,
},
{
audio_codec: 'none', // remove the audio
end_offset: 3, // shorten to 3 seconds
effect: 'accelerate:-25', // slow down 25% (to ~4 seconds)
},
{
overlay: {
font_family: 'roboto', // lots of Google Fonts are supported
font_size: 40,
text_align: 'center',
text: 'Lifecycle Hooks', // this can be any text you want
},
width: 500,
crop: 'fit',
color: 'white',
},
{ flags: 'layer_apply' },
{
flags: 'layer_apply',
start_offset: 0, // put this at the beginning of the video
},
],
// allow this transformed image to be cached to avoid re-running the same
// transformations over and over again
overwrite: false,
})
.then((result) => {
console.log(result);
});Zusätzlich zur Einstellung der Schriftgröße und Ausrichtung wenden wir eine Breite von 500 Pixeln an (die standardmäßig zentriert wird), damit unser Titelltext nicht an den Rand der Titeltafel stößt, und setzen den crop -Wert auf fit , was längere Titel umbricht. Das Setzen der color auf white macht unseren Text auf dem dunklen, sternenklaren Hintergrund sichtbar.
Führen Sie node index.js aus, um die URL zu generieren, und wir sehen unser vollständig gebrandetes Video, einschließlich Titeltafel und Bumper!
Erstellen Sie Ihr Video-Branding einmal; verwenden Sie es überall
Das Erstellen von Bumpers, Übergängen und Titeltafeln ist viel Arbeit. Die Erstellung von qualitativ hochwertigen Videoinhalten ist *auch* viel Arbeit. Wenn wir jedes Jamstack Explorers-Video manuell bearbeiten müssten, um diese Titeltafeln und Bumper einzufügen, ist es äußerst unwahrscheinlich, dass wir es tatsächlich getan hätten.
Wir wussten, dass der einzig realistische Weg für uns, die Videos konsistent gebrandet zu halten, darin bestand, die Reibung beim Hinzufügen des Brandings zu reduzieren, und Cloudinary hat es uns ermöglicht, es vollständig zu automatisieren. Das bedeutet, dass wir konsistent bleiben können, ohne manuelle Schritte!
Als zusätzlicher Bonus bedeutet es *auch*, dass wir, wenn wir unsere Titeltafeln oder Bumper in Zukunft aktualisieren, das *gesamte* Branding für *alle* Videos aktualisieren können, indem wir den Code an einer Stelle ändern. Das ist eine große Erleichterung für uns, denn wir wissen, dass Explorers weiter wachsen und sich im Laufe der Zeit weiterentwickeln wird.
Was als Nächstes zu tun ist
Nachdem Sie nun wissen, wie Sie Cloudinary zur Hinzufügung von benutzerdefiniertem Branding verwenden können, finden Sie hier einige zusätzliche Ressourcen, die Ihnen beim weiteren Lernen helfen.
- Sehen Sie sich den Quellcode für dieses Tutorial an.
- Sehen Sie sich den Quellcode für das Video-Branding von Jamstack Explorers an.
- Erfahren Sie mehr über die Video-Transformations-APIs von Cloudinary.
- Erfahren Sie mehr über Webentwicklung auf Jamstack Explorers.
- Erfahren Sie, wie Sie benutzerdefinierte Social-Media-Bilder mit Cloudinary erstellen.
- Sehen Sie sich Bens vollständige Mission an , um zu sehen, wie alles zusammenkommt!
Was können Sie sonst noch mit Cloudinary automatisieren? Wie viel Zeit könnten Sie sparen, indem Sie die repetitiven Teile Ihres Video-Bearbeitungs-Workflows automatisieren? Ich bin genau die Art von Nerd, die es liebt, über solche Dinge zu reden. Schicken Sie mir also Ihre Ideen auf Twitter!
Tolle Erklärung
Nur eine kurze Frage: Wenn es um Bild-/Videotransformationen geht, gibt es eine Möglichkeit, zum Beispiel CSS-Filter darauf anzuwenden (nach dem Hochladen)?