Caching .ts video fragments for HLS - Setup CloudFront video CDN for Live Events. Part II

Jun 05, 2024

In this tutorial, we’re going to set up correct caching behaviour for our Callaba x CloudFront setup.

Note : this tutorial is a second part in our series on CloudFront

This tutorial is the second part in our series on CloudFront.

Why do we need correct cache settings

Steps outlined in this tutorial are needed to ensure smooth streaming without interruptions. If not set up properly, your stream might suddenly stop coming.

While caching is a big part of video delivery at scale, there are elements that need to be refreshed and re-requested frequently, to ensure that fresh content is delivered. These elements are not to be cached for a long time.

Understanding HLS

In this part, we’re going to briefly explain the underlying logic behind our cache settings. If you are not interested in this information, you can skip right to the settings part.

As we’re using HLS (HTTP Live Streaming) protocol for video delivery, our cache settings will have to address it’s technical structure.

HLS has two main parts under its hood :

.ts files

These files contain actual video and audio content, segmented into small chunks, usually a few seconds long.

.m3u8 files

These are the playlist files that contain references to the .ts files and other metadata. In essence, they tell your device where to find the .ts files and in what order to play them.

In the context of caching, .ts and .m3u8 files play different roles.

Caching .ts files

Caching .ts files is beneficial because they are relatively small and represent the actual video / audio data.

By caching .ts files, a caching server can quickly and efficiently serve repeated requests for the same content.
Caching reduces the load on the origin server.

Caching .m3u8 files

Caching .m3u8 files is tricky; it is not a good idea to cache .m3u8 files for too long. These files include dynamic information, as during live stream new .ts files are created and added.

Caching dynamic .m3u8 files may lead to serving outdated or incorrect information to users, resulting in playback issues.

Let’s summarize

It’s a good idea to cache .ts files
Not really a good idea to cache .m3u8 files

Now that we understand the peculiarities of HLS, let’s set it up.

Create new caching behaviour

● 1. Go to Amazon CloudFront page or look it up in the console.

Open your CloudFront distribution.

Navigate to “Behaviours” tab

There you will see your Default (*) behaviour. Unfortunately, there are some restrictions regarding the things that you can modify in your default behaviour. Because of this, we’re going to create a new behaviour.

Click “Create behaviour”

● 2. In the new page that opens

‣Path pattern : /*.ts

Path pattern setting defines the URL pattern that CloudFront will use to match incoming requests. In this case, /*.ts indicates that CloudFront should handle requests for files with the .ts extension.

Origin and origin groups : select your origin

‣ Viewer protocol policy

⚠️️ This setting will be different, depending on whether or not you’re planning to set up your own domain name and connect it to CloudFront.

If you are NOT going to set your own domain — Select HTTP and HTTPS
If you are going to do it — Select Redirect HTTP to HTTPS

Allowed HTTP methods
Select “GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE”

● 3. In the “Cache key and origin requests” section

Select Cache policy and origin request policy (recommended)

‣ Cache Policy
Select CachingOptimized

‣ Origin Request Policy
Select AllViewer

Scroll down to the end of the page
Click “Create behaviour”

Okay, great! We’re almost there.

● 4. Open “Behaviours” tab again.

Select the Default (*) behaviour and click “Edit”.

Scroll down

‣ Cache Policy
Select CachingDisabled

Save changes.

Awesome. With these new settings, CloudFront will only cache .ts files and will not cache .m3u8 files, so your users will always receive the latest version of the .m3u8 playlist and get the latest content.

This concludes first part of our tutorial on AWS CloudFront. In our next tutorial we’re going to explain how to attach your own domain name to CloudFront.

If you have any questions, you can contact us at [email protected], and we’ll respond within 48 hours.

Happy streaming!