#16 Expert: Wie erstellt man 100te Bilder und Videos on Scale?

VonHolger Gelhausen

Worum geht es in diesem Artikel?

In den Beitrag zeige ich wie man Shotstack.io, Airtable und Make.com Video Slideshows on Scale erstellt. Als besonderes Beispiel erkläre ich wie man den Kevin Burns Effekt erzeugt

Wie erstellt man für eine Serie z.B. #100DaysOnAI passende Teaser Videos und Bilder?

In einer der letzten Beiträge habe ich gezeigt, wie ich jedem Thema (Record in Airtable) 10 Bilder zuweise.

#13 Expert: Content-Strategien: Wie werden PowerPoint Slides / PDF on Scale gebaut?

Wie kann ich 100 individuelle Teaser Videos erstellen?

Meine Bedingung ist, ein Häkchen in Airtable setzen und als Ergebnis bekomme ich einen Link zum Video zurück.

Die aktuellen Videoprogramme CapCut, Camtasia oder Adobe Produkte haben überhaupt keine API oder sind schwer anzusprechen. Was ich eigentlich brauche ist ein ffmpeg in der Cloud. Nach langer Suche habe ich keine gute Alternative ausserhalb von Shotstack.io gefunden.

Shotstack.io hat einen einfachen Video Editor der es ermöglicht jedes Text-, Bild- oder Videofeld als Variable anzusprechen.

Die Videos werden in einem JSON File dargestellt, wenn man tiefer technisch einsteigen möchte.

curl --request POST 'https://api.shotstack.io/v1/render' \
--header 'content-type: application/json' \
--header 'x-api-key: TJNb5JoGc8lqyBVF1p8JOepxvyaXW6JPGj6xDFVp' \
--data-raw '{
 "timeline": {
 "fonts": [
 {
 "src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/zfe0a140fc/zzy9k2s1-4byt-9x3y-0o6m-1aertr0o1vhg/source.ttf"
 },
 {
 "src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/zfe0a140fc/zzy9bqkz-4g1w-110g-epbd-18nnyv2umrp5/source.ttf"
 }
 ],
 "background": "#000000",
 "tracks": [
 {
 "clips": [
 {
 "asset": {
 "type": "html",
 "width": 524,
 "height": 74,
 "html": "<p data-html-type=\"text\">www.mycardealership.com</p>",
 "css": "p { color: #c40005; font-size: 41px; font-family: \"Roboto Black\"; text-align: center; }"
 },
 "fit": "none",
 "scale": 1,
 "offset": {
 "x": 0.3,
 "y": -0.375
 },
 "position": "center",
 "transition": {
 "in": "carouselLeft"
 },
 "start": 0.25,
 "length": 9.75
 }
 ]
 },
 {
 "clips": [
 {
 "asset": {
 "type": "html",
 "width": 300,
 "height": 75,
 "html": "<p data-html-type=\"text\">SAVE</p>",
 "css": "p { color: #ff090f; font-size: 71px; font-family: \"Montserrat ExtraBold\"; text-align: center; }"
 },
 "fit": "none",
 "scale": 1,
 "offset": {
 "x": 0.355,
 "y": 0.198
 },
 "position": "center",
 "transition": {
 "in": "carouselDown"
 },
 "start": 0.15,
 "length": 9.85
 }
 ]
 },
 {
 "clips": [
 {
 "asset": {
 "type": "html",
 "width": 300,
 "height": 80,
 "html": "<p data-html-type=\"text\">{{ DISCOUNT }}</p>",
 "css": "p { color: #3b3b3b; font-size: 93px; font-family: \"Roboto Black\"; text-align: center; }"
 },
 "start": 0,
 "fit": "none",
 "scale": 1,
 "offset": {
 "x": 0.356,
 "y": 0.117
 },
 "position": "center",
 "transition": {
 "in": "carouselDown"
 },
 "length": 10
 }
 ]
 },
 {
 "clips": [
 {
 "asset": {
 "type": "image",
 "src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/zfe0a140fc/zzy9k1cs-2e5x-bb3c-pm5f-2aepar1v0k8o/source.png"
 },
 "start": 0,
 "offset": {
 "x": 0.353,
 "y": 0.129
 },
 "position": "center",
 "transition": {
 "in": "slideDown"
 },
 "length": 10,
 "scale": 0.17
 }
 ]
 },
 {
 "clips": [
 {
 "asset": {
 "type": "image",
 "src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/zfe0a140fc/zzy9k2jh-4tin-oz4i-qiks-0rzeeh18j6ic/source.png"
 },
 "start": 0,
 "offset": {
 "x": -0.378,
 "y": 0.381
 },
 "position": "center",
 "scale": 0.1,
 "transition": {
 "in": "slideRight"
 },
 "length": 10
 }
 ]
 },
 {
 "clips": [
 {
 "asset": {
 "type": "html",
 "width": 1063,
 "height": 194,
 "html": "<p data-html-type=\"text\">NOW ON</p>",
 "css": "p { color: #da0c11; font-size: 251px; font-family: \"Roboto Black\"; text-align: center; }"
 },
 "fit": "none",
 "scale": 1,
 "offset": {
 "x": -0.052,
 "y": 0.175
 },
 "position": "center",
 "transition": {
 "in": "carouselDown"
 },
 "start": 0,
 "length": 10
 }
 ]
 },
 {
 "clips": [
 {
 "asset": {
 "type": "html",
 "width": 1000,
 "height": 100,
 "html": "<p data-html-type=\"text\">RUNOUT SALE</p>",
 "css": "p { color: #1a1a1a; font-size: 112px; font-family: \"Times New Roman\"; text-align: center; }"
 },
 "fit": "none",
 "scale": 1,
 "offset": {
 "x": -0.052,
 "y": 0.313
 },
 "position": "center",
 "transition": {
 "in": "carouselDown"
 },
 "start": 0.25,
 "length": 9.75
 }
 ]
 },
 {
 "clips": [
 {
 "asset": {
 "type": "image",
 "src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/zfe0a140fc/zzy9k1o4-1qwv-qb19-9tpq-2w2bt10ljm36/source.png"
 },
 "start": 0,
 "offset": {
 "x": -0.156,
 "y": -0.257
 },
 "position": "center",
 "transition": {
 "in": "zoom"
 },
 "effect": "zoomInSlow",
 "length": 10,
 "scale": 0.44
 }
 ]
 },
 {
 "clips": [
 {
 "asset": {
 "type": "image",
 "src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/zfe0a140fc/zzy9k1ox-0tlx-px07-jtpz-0ay6ab3wveph/source.png"
 },
 "start": 0,
 "offset": {
 "x": 0,
 "y": 0
 },
 "position": "center",
 "scale": 1,
 "length": 10,
 "opacity": 0.35
 }
 ]
 },
 {
 "clips": [
 {
 "asset": {
 "type": "image",
 "src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/zfe0a140fc/zzy9k1uo-1ob5-a64t-xqdh-3l3fcd13lm4j/source.jpg"
 },
 "start": 0,
 "offset": {
 "x": -0.008,
 "y": 0.074
 },
 "position": "center",
 "scale": 1.43,
 "length": 10
 }
 ]
 }
 ]
 },
 "output": {
 "format": "mp4",
 "fps": 25,
 "quality": "veryhigh",
 "size": {
 "width": 1920,
 "height": 1080
 },
 "poster": {
 "capture": 2
 },
 "thumbnail": {
 "capture": 2,
 "scale": 0.3
 },
 "destinations": []
 },
 "merge": [
 {
 "find": "DISCOUNT",
 "replace": "30%"
 }
 ]
}'

Super, shotstack.io hat eine Make.com/Zapier Schnittstelle, so das ein Workflow schnell erstellt ist.

Ich habe mir folgendes Template als Test ausgesucht.

Die Farben, Hintergründe, Bilder, Dramaturgie stimmen alle noch nicht. Was dabei auffällt, das die Bilder Ränder haben. Die Bilder liegen in einem 16:09 Format vor und werden in das Bild gezoomt. Dadurch entstehen die Ränder.

Das beste wäre, ich würde die Bilder schon im passenden Format hochladen können. Der normale Weg wäre die Bilder direkt in den passenden Formaten in die Airtable Base zu laden, da ich aber nicht weiss, welche Formate ich in Zukunft brauche, ein ziemlich aufwendiges Verfahren.

Die Rettung! URL based Transformations

Manche Cloudanbieter haben ein Verfahren um die Bilder direkt im passenden Format auszuliefern. Man muss dem Cloudanbieter mitteilen welche Größe/Format von dem Bild man haben möchte.

Cloudinary oder Publit.io bieten solche URL Transformationen an.

Im Detail wird dann, im URL Pfad das passende Format direkt mit angegeben was man haben möchte, nicht nur die Größe ist möglich, sondern auch „suche das Gesicht“. Hier ein Beispiel:

An der URL kann man die Möglichkeiten zur Transformation sehen.Was ich jetzt brauche, die Größe des Ausgabebildes in dem shotstack Video ungefähr in Pixel bestimmen, damit kann ich die URL des Bildes im Video anpassen.

Das nächste Bild zeigt eine URL nach dem Beispiel. Ich lasse mir das Bild in 1920*800 anzeigen.

Im Make.com Skript wird dann ein Filter eingefügt, der auf das passende Template die richtigen URL Transformationen durchführt.

Jetzt sind die technischen Voraussetzungen geklärt, was noch fehlt ist das knackige Design, das ist für mich das schwierigste.

Shotstack.io bietet noch ein paar andere interessante Möglichkeiten.

Was ist ein Ken Burns Effect?

Der Ken Burns Effect zoom in das Video herein oder heraus, je nachdem welche Effekte man erzielen will.

Vor zwei Jahren habe ich dieses famose Skript entdeckt, das ein beliebige Anzahl von Bildern in eine Video Slideshow verwandelt. Das habe ich für mich umgesetzt und aus PDF Files Slideshows erstellt.

https://el-tramo.be/blog/ken-burns-ffmpeg

Hier ein Beispiel: Die PDF wird runtergeladen mit einem KeyBoard Maestro Skript und aus der PDF Bilder erstellt und diese dann in eine Slideshow verwandelt.

Die Verarbeitung war lokal auf dem Mac und das Video wurde dann automatisch wieder hochgeladen. Die Anpassung ist aufwändig. Einfacher ist so eine Verarbeitung in der Cloud und Shotstack bietet genau diese Funktionalität.

Make.com hat dazu ein Funktion „Create Video Slideshow“. Hier eine Übersicht über die Befehle.

Viele der ffmpeg Skripte die ich über die Jahre gebaut habe, werden damit immer weniger aufgerufen.

In den nächsten Tagen wird das Design gemacht. Bin mal gespannt wie das aussieht.

Teile diesen Artikel

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert