Blog

(This is a sponsored post.)

Videos appeal to humans in a way no other form of the content does. A video includes motion, music, still images, text, speech, and a few other elements, all of which combine to deliver engagement like never before.

According to research, users spend 88% more time on a website with videos, and video content receives 1200% more shares than images or text. This is corroborated by the trend we see on key social media platforms, with businesses on these platforms now preferring video content over still images.

When streaming videos on one’s website or app, hosting a video on a platform like YouTube might not be a viable option. This is especially true if you want to present a native-looking user experience and control it, or you do not want to share revenues with a third party.

In such cases, cloud providers like AWS become the go-to choice for hosting and streaming videos.

Streaming optimized videos from S3 — current methods and drawbacks

A typical setup includes hosting the videos on AWS S3, the most popular cloud object storage around, and then directly streaming them on the users’ device.

For an even better video load time, you can use AWS CloudFront CDN with your S3 bucket.

However, given that the original videos are often massive in size and that neither S3 nor CloudFront have built-in video optimization capabilities, this is far from ideal.

Therefore, the video streaming is slow and results in unnecessary waste of bandwidth, lower average video playback time, and lower user retention and revenues.

To solve this, we need to optimize videos for different devices, network speeds, and our website or app layout before streaming from the S3 storage.

While you could use a solution like AWS Elemental MediaConvert for all kinds of transcoding and optimizations, such solutions often have a steep learning curve and often become very complex to manage. For example:

1. You need to understand how to set up these tools with your existing workflow and storage, understand job creation in these tools, and manage job queues and job completion notifications in your workflow.
2. To create MediaConvert jobs, you would have to understand different streaming protocols, encoding, formats, resolution, codecs, etc., for video streaming and map them to your requirements to build the right jobs.
3. AWS MediaConvert is not an on-the-fly video conversion tool in itself. You need to pair it with other AWS services to make it work in real-time, making the setup even more complex and expensive. If you do not opt for on-the-fly video conversion, you need to configure MediaConvert’s jobs correctly from the go. Any new requirement will require the job to be changed and re-run on all videos to generate a new encoding or format. With an ever-changing video streaming landscape coupled with new device sizes, this can be a severe limitation if you have a lot of videos coming in regularly.

With videos becoming the choice of media online, it should be easier to stream videos from your S3 storage so that you can focus on delivering a better user experience and the core business rather than understanding the intricacies of video streaming.

This is where ImageKit comes in.

ImageKit is a complete media management and delivery platform with a Video API that allows you to stream videos stored in AWS S3 and optimize and transform them in real-time with just a few minutes of setup.

That’s right. You will be able to deliver videos perfected for every device without learning about the complications of video streaming and without spending hours configuring a tool.

Let’s look at how you can use ImageKit for streaming videos from your S3 bucket.

S3 video streaming with ImageKit

To be able to stream videos from in our S3 bucket with ImageKit, we would need to do two things:

1. Allow ImageKit to read the objects in the S3 bucket
2. Access the video in the S3 bucket via their ImageKit URLs

Let’s look at these two steps in detail.

1. Connecting your bucket with ImageKit for access

ImageKit can pull assets from all popular storage and servers, including private and public S3 buckets. Access to a private S3 bucket is done using a pair of read-only keys that you create in your AWS account. You can read more about adding the S3 bucket origin in detail here.

If your bucket or the video objects inside it are public, you can add it as a web folder type origin. To do this, you would need to use the S3 bucket’s domain name as the base URL for this origin.

Also, ensure that you map the S3 bucket to a URL endpoint in the ImageKit dashboard.

That’s it! You have now connected your S3 bucket with ImageKit.

Bonus: ImageKit also provides an integrated Media Library, file storage built on AWS S3, with easy-to-use UI and APIs for advanced media management and search. If you do not have an S3 bucket or want a better solution to organize your video content, you can host your videos in ImageKit’s Media Library as well.

2. Video Streaming from S3 using ImageKit URLs

With your S3 bucket now attached to ImageKit, you can now access any video file in your bucket via ImageKit.

For example, we have the video sample.mp4 in our test bucket at the key videos/woman-walking.mp4. We can access it with ImageKit using the following URL:

https://ik.imagekit.io/ikmedia/videos/woman-walking.mp4

When we open this URL in a browser tab, the browser will stream the video via ImageKit.

We can now use this URL in a <video> tag to stream videos on our web page.

<video src="https://ik.imagekit.io/ikmedia/videos/woman-walking.mp4" controls></video>

And because ImageKit comes integrated with AWS CloudFront CDN, your videos will get delivered in milliseconds to your users, thereby improving the overall streaming experience.

Using video optimizations and transformations with S3 streaming

We have seen how to stream videos from S3 using ImageKit on our apps. However, as mentioned earlier in the article, we need to optimize videos for different devices, website layout, and other conditions.

ImageKit helps us there as well. It can optimize and scale your videos or encode them to different formats in real-time. In addition, ImageKit makes most of the necessary optimizations automatically, using the best defaults, or exposes the functionalities as easy-to-use URL parameters that work in real-time.

So, unlike the other tools like AWS MediaConvert, there is minimal learning you need to do. And you definitely won’t have to learn the nuances of video streaming and encoding.

Let’s look at the video optimizations and transformations ImageKit is capable of, apart from direct streaming of videos from S3.

1. Automatic conversion to best format while streaming

ImageKit automatically identifies the video formats supported in browsers and combines them with the original video information to encode it to the best possible output format.

The video format optimization is done in real-time when you request your S3 video via ImageKit and results in a smaller video size sent to the user.

To enable this automatic format conversion, you have to enable the corresponding setting in your ImageKit dashboard. No complex setup, no configurations needed.

For example, after enabling the above setting, an MP4 video gets delivered in WebM format in Chrome and MP4 in Safari.

2. Automatic compression of videos while streaming

Modern cameras capture videos that can easily run into a few 100MBs, if not GBs. It is not ideal to deliver such large video files to your users. It will take them ages to stream the video, results in a poor user experience, and impact your business.

Therefore, we need to compress the video to deliver it quickly to our users. However, we need to do so while maintaining the visual quality of the video.

That is again something ImageKit does for you automatically.

You can turn on the corresponding setting from the ImageKit dashboard and set the default compression level for your videos. By default, this value would be 50, which strikes a good balance between output size and visual quality.

After enabling this setting, ImageKit will encode your video at the specified compression level before streaming it to the user’s device.

Because of the compression, though the following video has the same format as its original video, it is lighter by almost 15% at 12.6MB compared to the original video at 14.6MB.

Using real-time video compression for slow network users

As explained with examples later in this article, ImageKit allows you to transform videos in real-time. One of the real-time URL transformations possible in ImageKit is to modify the compression level.

This transformation allows us to override the default compression level selected in the dashboard.

The video below, for example, is compressed to a quality level of 30 and is almost 70% smaller than the video we encoded using the default quality level of 50 set in the dashboard.

This real-time compression-level transformation allows us to adapt our videos to users on slow networks.

For example, if someone is experiencing poor network conditions, you can stream a more compressed, lighter video to them.

3. Scaling S3 videos in real-time while streaming

Imagine you want to load a video on your page and have only a 200px width available for your content. The resolution of the original video you have, almost always, would be a lot higher than this size. Loading anything significantly larger than the size you require is a waste of bandwidth and offers no benefit to the user.

With ImageKit, you can scale the video to any size in real-time before streaming it on the device. Just like its real-time image transformation API, you can add a width or height parameter to the URL, and you will get a video with the required dimensions in real-time.

For example, we have scaled down our video to a width of 200px using the URL given below.

https://ik.imagekit.io/ikmedia/videos/woman-walking.mp4?tr=w-200

4. Adapting videos to different placeholders and creating vertical videos

We often shoot videos in landscape mode, i.e., the video’s width is greater than its height. However, you would often require a portrait or vertical video where the height is greater than the video’s width.

A very common use case would be converting your landscape video to a vertical one like an Instagram story.

ImageKit makes it super simple with its real-time video transformations. You can add the width and height parameters to the video URL and get the output video in the requested size.

https://ik.imagekit.io/ikmedia/videos/woman-walking.mp4?tr=w-300,h-500

ImageKit streams the video in the most suitable format and at the right compression level for all the transformations above. The video is delivered via its integrated AWS CloudFront CDN for a fast load time.

For the demo video used in this article, we started with a 14.6MB original video, but after all the optimizations and scaling it down, we were able to bring down the size to 1.8MB in the last example of the vertical video.

Signup with ImageKit for S3 video streaming for free

ImageKit offers a Forever Free plan that includes video delivery as well as processing. On this plan, you would be able to optimize and transform over 15 minutes of fresh video content every month and then deliver it to thousands of users without paying a single penny or even providing your credit card. This is perfect for a small business or your side project where you can connect your S3 bucket to ImageKit and start streaming optimized videos immediately.

Sign up now for ImageKit to start streaming optimized videos from S3 for free.