Video editing has never been something I truly enjoyed. I often found video editors cumbersome, and wasn’t willing to spend the time learning to use professional video editing applications. Let alone pay hundreds of dollars per year on an Adobe subscription.
I did always enjoy programming, primarily because of the flexibility it afforded me to create whatever I wanted — bound only by my imagination and my skills as a developer.
The video shown above has been created with nothing other than code. No editing software has been used to design or render this video, with only a 40 line piece of JSON being needed to put together all individual elements to create a fully composited video using the Shotstack API.
Shotstack enables video editing at scale. The API allows you to describe your video edit in JSON, and then use your favourite programming language to render hundreds to thousands of data-driven videos concurrently in the cloud.
I wrote this guide to show you how you can use code instead of software to build cool and artistic videos, and I hope this small guide provides you with some inspiration to start creating your own videos.
We’ll start off by creating something simple (such as compositing a title on a video clip), and then overlaying a soundtrack to give it some emotion. At the end, I’ll show you some more advanced features to finish off the video with some professional-looking effects.
Let’s get started.
Sign up for an API key
In order to build your first video you’ll need to sign up for a Shotstack developer account. This is completely free and will allow you to access all of Shotstack’s video editing functionalities to build videos and develop applications. After registering just log in via the Shotstack website to receive your API key.
Curl vs Postman
This tutorial presumes a basic knowledge of interacting with API’s. For this guide we’ll be using Curl but you can use any other application such as Postman as well.
The basics
Before diving in and writing any code it is a good idea to acquaint yourself with some basic video editing principles and how these relate to Shotstacks JSON video editing format.
Edit — An Edit in Shotstack is essentially a JSON file describing how assets such as titles, video clips and images are arranged to create a video.
Timeline — The timeline represents the entire duration of your video in seconds. For example, a 30 second video edit would have a 30 second timeline. Clips are placed along the timeline via a track.
Tracks — A track runs for the entire duration of the timeline and is used to layer clips on top of each other. For example, you can layer text on top of an image or a video clip. You can place multiple tracks on top of each other to create complex compositions.
Clips — A clip is a placeholder for an asset (titles, images, videos, audio, html, and Luma assets) and are positioned on the timeline (via a track) at specific time intervals. For example, you could add a clip that starts playing at the 5th second until the 10th second. Here you can also apply transitions, filters, and motion effects.
Assets — When creating a clip, you specify the type of asset to be displayed. This can be a text title, image, video clip, HTML, audio or a Luma asset. Each asset has options specific to its type. For example a title asset will have a type style, and a video asset might have a trim point to cut the start and end of the clip.
Output — The output specifies the final render properties, with the API supporting mp4 video files and gifs in a range of resolutions such as HD, SD and mobile.
If this does not all make sense yet, it will all become clearer once we create a few examples.
Your first Edit
Let’s create a very simple “Hello World” title video.
Create a text file called hello.json with the following contents:
{
"timeline": {
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "title",
"text": "Hello World",
"style": "future"
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "sd"
}
}In this JSON snippet we specify a timeline with a black background, a track with a single clip which plays for 5 seconds, and a title asset with the text ‘Hello World’. We specify the output as an mp4 video with SD resolution.
Now we post the Edit to the API for rendering by running the command below. Remember to replace the x-api-key parameter value above with your own staging key. If you don’t have a key yet you can get one by signing up here.
curl -X POST \
-H "Content-Type: application/json" \
-H "x-api-key: YOUR_API_KEY" \
-d @hello.json \
https://api.shotstack.io/stage/renderYou should see a response similar to:
{
"success": true,
"message": "Created",
"response": {
"message": "Render Successfully Queued",
"id": "d2b46ed6-998a-4d6b-9d91-b8cf0193a655"
}
}Copy the response id returned by the API as we will need it in the next step.
To check the status of the render run the following command, making sure to replace d2b46ed6–998a-4d6b-9d91-b8cf0193a655 with the id just copied.
curl -X GET \
-H "Content-Type: application/json" \
-H "x-api-key: YOUR_API_KEY" \
https://api.shotstack.io/stage/render/d2b46ed6-998a-4d6b-9d91-b8cf0193a655The video should only take a few seconds to render. Once it is ready the response will show a status of done and include a URL to the final video file:
{
"success": true,
"message": "OK",
"response": {
"id": "d2b46ed6-998a-4d6b-9d91-b8cf0193a655",
"owner": "hckwccw3q3",
"plan": "sandbox",
"status": "done",
"url": "https://s3-ap-southeast-2.amazonaws.com/shotstack-api-stage-output/hckwccw3q3/d2b46ed6-998a-4d6b-9d91-b8cf0193a655.mp4",
"data": {
"output": {...},
"timeline": {...}
},
"created": "2019-04-16T12:02:42.148Z",
"updated": "2019-04-16T12:02:51.867Z"
}
}If the status is not yet done (it might show queued, rendering, saving, fetching, or failed) wait a few seconds and run the command again.
Once your video is completed you can copy the URL and open it in your browser. You should see a simple 5 second video with the words ‘Hello World’ on a black background similar to the below.
Congratulations! You have created your first video using the Shotstack API.
It is obviously still a little bit boring so let’s spice it up by adding a soundtrack and a background video.
Adding a video clip and soundtrack
Replace the contents of hello.json with the following snippet:
{
"timeline": {
"soundtrack": {
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/motions.mp3"
},
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "title",
"text": "Hello World",
"style": "future"
},
"start": 0,
"length": 15
}
]
},
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/earth.mp4"
},
"start": 0,
"length": 15
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "1080"
}
}In this example we have added a new soundtrack file as a second track (motions.mp3), in addition to the video asset earth.mp4. Both the title and video clip have a length of 15 seconds and start at 0 seconds, meaning we have composited these tracks on top of each other.
Note that the video asset is positioned below the title asset. This makes sure that the text is rendered on top of the video file and not hidden underneath.
Go ahead and use the previous Curl commands to post the video and check its status. You should end up with a video like the one below:
This video is already a lot more interesting, but it could still do with a bit of refinement to give it a more professional touch.
Adding the final touches to our edit
To add some final polish we will reposition and resize the title and fade in and out both the video clip and soundtrack, in addition to a few other styling improvements.
Replace the hello.json file with the following and post it to the API using the Curl command and check its status.
{
"timeline": {
"soundtrack": {
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/motions.mp3",
"effect": "fadeOut"
},
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "title",
"text": "Hello World",
"style": "future",
"position": "left",
"size": "x-small"
},
"start": 4,
"length": 11,
"transition": {
"in": "fade",
"out": "fade"
},
"effect": "zoomIn"
}
]
},
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/earth.mp4",
"trim": 5
},
"start": 0,
"length": 15,
"transition": {
"in": "fade",
"out": "fade"
}
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "sd"
}
}In the Edit above we’ve added the following:
- A fadeOut effect is added on the soundtrack;
- We use a fade in and fade out transition on the title asset and on the video asset;
- We position the title asset to the left and adjust its size;
- We start displaying the title asset after 4 seconds in time to the music;
- We add a zoomIn motion effect to the title asset;
- We trim the first 5 seconds off the start of the video asset.
The result is below:
A lot more to explore
Hopefully, this article has inspired you to use code to create beautiful videos. We’re always really interested in seeing what people are able to come up with so if you’ve managed to create something cool please share!
If you are keen to learn more please check out the documentation. We are always working on building more guides and resources on shotstack.io and have examples available using our PHP and NodeJS SDKs.
There’s a lot to explore, so subscribe to our newsletter if you’re interested in learning more. I’ll write another article soon that covers how you can use HTML and CSS to build your videos. Here a glimpse of what that looks like:
Also published here.