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. 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 . The video shown above has been created with nothing other than code. Shotstack API 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. Shotstack 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 . 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. sign up for a Shotstack developer account Curl vs Postman This tutorial presumes a basic knowledge of interacting with API’s. For this guide we’ll be using but you can use any other application such as as well. Curl Postman 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. — An in Shotstack is essentially a JSON file describing how assets such as titles, video clips and images are arranged to create a video. Edit Edit The 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 . Timeline — timeline track — A 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. Tracks track — A is a placeholder for an asset (titles, images, videos, audio, html, and ) 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. Clips clip Luma assets — When creating a , you specify the type of asset to be displayed. This can be a , , , , or a . 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. Assets clip text title image video clip HTML audio Luma asset — The 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. Output output 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 with the following contents: hello.json { : { : , : [
      { : [
          { : { : , : , : }, : , : }
        ]
      }
    ]
  }, : { : , : }
} "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 \
  -H \
  -d @hello.json \
  https://api.shotstack.io/stage/render "Content-Type: application/json" "x-api-key: YOUR_API_KEY" You 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 with the id just copied. d2b46ed6–998a-4d6b-9d91-b8cf0193a655 curl -X GET \
  -H \
  -H \
  https://api.shotstack.io/stage/render/d2b46ed6-998a-4d6b-9d91-b8cf0193a655 "Content-Type: application/json" "x-api-key: YOUR_API_KEY" The 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 with the following snippet: hello.json { : { : { : }, : , : [
      { : [
          { : { : , : , : }, : , : }
        ]
      },
      { : [
          { : { : , : }, : , : }
        ]
      }
    ]
  }, : { : , : }
} "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 ( ), in addition to the video asset . 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. motions.mp3 earth.mp4 This makes sure that the text is rendered on top of the video file and not hidden underneath. Note that the video asset is positioned below the title asset. 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 file with the following and post it to the API using the Curl command and check its status. hello.json { : { : { : , : }, : , : [
      { : [
          { : { : , : , : , : , : }, : , : , : { : , : }, : }
        ]
      },
      { : [
          { : { : , : , : }, : , : , : { : , : }
          }
        ]
      }
    ]
  }, : { : , : }
} "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 effect is added on the soundtrack; fadeOut We use a fade in and fade out on the title asset and on the video asset; transition We the title asset to the left and adjust its size; position We displaying the title asset after 4 seconds in time to the music; start We add a to the title asset; zoomIn motion effect We the first 5 seconds off the start of the video asset. trim 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 . We are always working on building more guides and resources on and have examples available using our and SDKs. documentation shotstack.io PHP NodeJS There’s a lot to explore, so 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: subscribe to our newsletter Also published here.

Adobe

shotstack

How I Built 1,000 Personalised Videos in Under 100 seconds

Building Your Own ESP8266/ESP32 Over-The-Air Firmware Updater [A How-To Guide] Part II

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Create Videos With Code [Free Tutorial]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Building your own ESP8266/ESP32 Over-The-Air Firmware Updater [A How-To Guide] Part I

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

113 Stories To Learn About Api Development

21 API Monitoring Tools That Will Make You a Developer Superhero in 2023!

Building your own ESP8266/ESP32 Over-The-Air Firmware Updater [A How-To Guide] Part I

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

113 Stories To Learn About Api Development

21 API Monitoring Tools That Will Make You a Developer Superhero in 2023!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps