Automate sports video highlights using an API

Highlight videos are very popular in the world of sports. It provides a way for those who witnessed the sporting event live to relive the experience. For those who missed the game, highlights videos help give them an overview of the key moments.

In this article, you will learn how to create sports highlight videos using Shotstack. We'll take a full length video of a soccer match and extract clips of key moments from the video. Then we'll stitch these clips together to create the final highlight video.

About Shotstack

Shostack is a cloud-based media automation platform that provides the infrastructure that makes it convenient to create dynamic videos at scale. With Shotstack, you can use JSON data to describe the arrangement of your video edit. This allows you to create professional-looking templates that can be used many times with different footage.

You will need to have a Shotstack API key to follow along. If you do not have one yet, you can get one when you sign up for a free account. The article also assumes that you have basic knowledge of interacting with APIs and running commands in the terminal.

Preparing our long form sports footage

To demonstrate a real world use case we will use a publicly available full length high school soccer game that we found on YouTube.

The video is over an hour and a half long and the original file is over 1.5GB in size. We have downloaded and compressed the video from YouTube and saved it to an AWS S3 account, ready for editing via the API at the following URL:

https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/soccer-game.mp4

In reality you would more likely be uploading footage directly from a camera. Sports broadcasters might use a recorded live stream or have access to footage in their archives which can be repurposed.

Handling large video files when editing

If you're working with a large file like the example above, there are a few things to consider and tools you can use:

Using the Ingest API

You can first use our Ingest API to upload the file. The advantage of doing so is it stores your file in close proximity (same data center) to the Edit API. This reduces download times during rendering and also reduces the risk of time outs from external servers.

You can also use the Ingest API create renditions from the original video which can further reduce the file size. For example if the source footage is uploaded as 1080p, but you only need 720p output videos, you can resize the video and create a rendition.

Caching source footage

It is also worth noting that footage used in an edit are cached so subsequent renders are faster. Caching is enabled by default and you do not need to do anything.

Disk space limitations

And one final thing to be aware of is the total disc space available for editing is 10GB, including the source footage and the final output video.

Capturing clips of key moments

Let's begin by extracting clips of key moments from the game. From the example soccer match video, the highlights we're extracting from it will be the goals. There were three goals in total so we'll extract them and then look at how we can stitch them together to create a single highlights reel.

Creating the first goal highlight clip

You can use the trim property to extract a section of a video clip. In this example, we'll cut out a clip of the first goal starting from the timestamp 57:45 to 58:05.

Create a new highlight.json file with the JSON below.

{
  "timeline": {
      "tracks": [
          {
              "clips": [
                  {
                      "asset": {
                          "type": "video",
                          "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/soccer-game.mp4",
                          "trim": 3465
                      },
                      "start": 0,
                      "length": 20
                  }
              ]
          }
      ]
  },
  "output": {
      "format": "mp4",
      "resolution": "sd"
  }
}

Note the value of the trim property. You need to provide it in seconds and the timestamp 57:45 where the clip of the first goal begins is 3465 seconds into the video.

Also, the value of length is 20 which means we're cutting out a 20-second clip. This clip will include the build-up to the first goal, the goal, and the goal celebrations.

Post the JSON Edit to the API

Make a POST to the render endpoint of the Edit API using the cURL command below. Replace SHOTSTACK_API_KEY with your Shotstack sandbox API key.

curl -X POST \
  -H "Content-Type: application/json" \
  -H "x-api-key: SHOTSTACK_API_KEY" \
  -d @highlight.json \
  https://api.shotstack.io/stage/render

The API will respond with JSON like the one below. Copy the value of response.id for the next step.

{
  "success": true,
  "message": "Created",
  "response": {
    "message": "Render Successfully Queued",
    "id": "0f9ae00a-4634-47a5-8944-e6adba152e65"
  }
}

Get the render status of the video

Replace RENDER_ID in the command below with the id you copied from the previous step. Don't forget to also replace SHOTSTACK_API_KEY with your actual API key. Run the command in your terminal to make a GET request to the API.

curl -X GET \
  -H "Content-Type: application/json" \
  -H "x-api-key: SHOTSTACK_API_KEY" \
  https://api.shotstack.io/stage/render/RESPONSE_ID?data=false

You should get a response like the following JSON. Check the value of response.status. If it's done, it means rendering is complete and you can access the video via the response.url value.

{
  "success": true,
  "message": "OK",
  "response": {
    "id": "0f9ae00a-4634-47a5-8944-e6adba152e65",
    "owner": "irwdtighyk",
    "plan": "sandbox",
    "status": "done",
    "error": "",
    "duration": 20,
    "billable": 20,
    "renderTime": 16291.21,
    "url": "https://shotstack-api-stage-output.s3-ap-southeast-2.amazonaws.com/irwdtighyk/0f9ae00a-4634-47a5-8944-e6adba152e65.mp4",
    "poster": null,
    "thumbnail": null,
    "created": "2024-05-16T19:24:57.853Z",
    "updated": "2024-05-16T19:25:44.843Z"
  }
}

Copy and paste the URL from the response into your browser to view or download the clip.

Creating the second highlight clip

Follow the same process described above to create other clips. The only thing that will change is the content of the JSON file.

{
  "timeline": {
      "background": "#000000",
      "tracks": [
          {
              "clips": [
                  {
                      "asset": {
                          "type": "video",
                          "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/soccer-game.mp4",
                          "trim": 4275
                      },
                      "start": 0,
                      "length": 20
                  }
              ]
          }
      ]
  },
  "output": {
      "format": "mp4",
      "resolution": "sd"
  }
}

Since we're cutting another 20-second clip, the only change in the JSON will be the value of trim. It has a value of 4275 which means we're starting the extraction from 4275 seconds into the video. This is equivalent to the timestamp 01:11:15.

Below is the extracted clip of the second goal.

Creating the third highlight clip

The third goal also follows the same process using the following JSON, which has a trim setting to include the final goal:

{
  "timeline": {
      "background": "#000000",
      "tracks": [
          {
              "clips": [
                  {
                      "asset": {
                          "type": "video",
                          "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/soccer-game.mp4",
                          "trim": 4595
                      },
                      "start": 0,
                      "length": 20
                  }
              ]
          }
      ]
  },
  "output": {
      "format": "mp4",
      "resolution": "sd"
  }
}

The following is the clip of the build-up for the third goal and celebration.

You now have three different clips extracted from the video. You could further enhance each of these clips with elements like text, logos, lower thirds and animated overlays and share them as individual videos to social media channels like YouTube, Instagram and TikTok.

Stitching the clips to create a highlight real

You could easily use the Edit API to merge the videos that we've already created. The disadvantage of doing this is that it would require a total of 4 renders - 3 to extract the clips and one more to join them back together again. Each time you render a video you also reduce the visual quality due to how the renders are compressed.

Instead what you can do, is extract and stitch the highlights together from the source footage in a single edit. This way, you only need to do one render, download and cache the clip once, and maintain the visual quality.

Preparing the highlight reel JSON

Create a reel.json file and add the following JSON to it.

{
  "timeline": {
    "tracks": [
      {
        "clips": [
          {
            "asset": {
              "type": "video",
              "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/soccer-game.mp4",
              "trim": 3465
            },
            "start": 0,
            "length": "20"
          },
          {
            "asset": {
              "type": "video",
              "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/soccer-game.mp4",
              "trim": 4275
            },
            "start": "auto",
            "length": "20"
          },
          {
            "asset": {
              "type": "video",
              "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/soccer-game.mp4",
              "trim": 4595
            },
            "start": "auto",
            "length": "20"
          }
        ]
      }
    ]
  },
  "output": {
    "format": "mp4",
    "resolution": "sd"
  }
}

In the JSON above we have three clips, each uses the same soccer-game.mp4 source footage file. The file will only be downloaded once, even though it is used 3 times.

The trim is set to start before each goal. We can set the start time as auto for the second and third clips which means they will play immediately after one another, in sequence.

Repeat the process we used to create the individual highlights to send the reel.json JSON to the Edit API. After a few seconds the video will be rendered and look like this:

You can bring the reel to life, ready to share online, with titles, overlays, transitions and more effects built in to the Edit API.

Conclusion

By creating this one-minute highlights video from the full match video, you've learned how to extract short clips from a longer video and stitch them together to create a highlight video. Using this approach you can take long form videos and repurpose them in to snack size, shareable moments. This is useful not only for sports highlights videos but also for other use cases like podcast trailers, movie recaps, and more.