{"id":357012,"date":"2021-12-02T07:41:22","date_gmt":"2021-12-02T15:41:22","guid":{"rendered":"https:\/\/css-tricks.com\/?p=357012"},"modified":"2021-12-02T07:41:24","modified_gmt":"2021-12-02T15:41:24","slug":"streaming-optimized-videos-from-aws-s3-in-minutes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/streaming-optimized-videos-from-aws-s3-in-minutes\/","title":{"rendered":"Streaming Optimized Videos From AWS S3 in Minutes"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

According to research<\/a>, 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

In such cases, cloud providers like AWS become the go-to choice for hosting and streaming videos.<\/p>\n\n\n\n\n\n\n

Streaming optimized videos from S3 \u2014 current methods and drawbacks<\/h3>\n\n\n

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.<\/p>\n\n\n\n

For an even better video load time, you can use AWS CloudFront CDN with your S3 bucket.<\/p>\n\n\n\n

\"\"
Typical video streaming setup with AWS S3 and CloudFront CDN without any video optimizations<\/figcaption><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Therefore, the video streaming is slow and results in unnecessary waste of bandwidth, lower average video playback time, and lower user retention and revenues.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

  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.<\/li>
  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.<\/li>
  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.<\/li><\/ol>\n\n\n\n
    \"\"
    < Description: Typical setup with on-the-fly video conversion with AWS MediaConvert involving multiple components. (Source: AWS<\/a>)<\/figcaption><\/figure>\n\n\n\n

    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.<\/p>\n\n\n\n

    This is where ImageKit comes in.<\/p>\n\n\n\n

    ImageKit<\/a> is a complete media management and delivery platform with a Video API<\/a> 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.<\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    \"\"
    ImageKit + AWS S3 video streaming setup with on-the-fly video optimizations<\/figcaption><\/figure>\n\n\n\n

    Let’s look at how you can use ImageKit for streaming videos from your S3 bucket.<\/p>\n\n\n

    S3 video streaming with ImageKit<\/h3>\n\n\n

    To be able to stream videos from in our S3 bucket with ImageKit, we would need to do two things:<\/p>\n\n\n\n

    1. Allow ImageKit to read the objects in the S3 bucket<\/li>
    2. Access the video in the S3 bucket via their ImageKit URLs<\/li><\/ol>\n\n\n\n

      Let’s look at these two steps in detail.<\/p>\n\n\n

      1. Connecting your bucket with ImageKit for access<\/strong><\/h4>\n\n\n

      ImageKit can pull assets from all popular storage and servers<\/a>, 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<\/a>.<\/p>\n\n\n\n

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

      Also, ensure that you map the S3 bucket to a URL endpoint in the ImageKit dashboard.<\/p>\n\n\n\n

      That’s it! You have now connected your S3 bucket with ImageKit.<\/p>\n\n\n\n

      Bonus<\/strong>: ImageKit also provides an integrated Media Library<\/a>, 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.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n

      2. Video Streaming from S3 using ImageKit URLs<\/h4>\n\n\n

      With your S3 bucket now attached to ImageKit, you can now access any video file in your bucket via ImageKit.<\/p>\n\n\n\n

      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<\/a>:<\/p>\n\n\n\n

      https:\/\/ik.imagekit.io\/ikmedia\/videos\/woman-walking.mp4<\/code><\/pre>\n\n\n\n
      When we open this URL in a browser tab, the browser will stream the video via ImageKit.<\/p>\n\n\n\n
      <video src=\"https:\/\/ik.imagekit.io\/ikmedia\/videos\/woman-walking.mp4\" controls><\/video><\/code><\/pre>\n\n\n\n
      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.<\/p>\n\n\n
      Using video optimizations and transformations with S3 streaming<\/h3>\n\n\n
      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.<\/p>\n\n\n\n
      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.<\/p>\n\n\n\n
      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.<\/p>\n\n\n\n
      Let’s look at the video optimizations and transformations ImageKit is capable of, apart from direct streaming of videos from S3.<\/p>\n\n\n
      1. Automatic conversion to best format while streaming<\/h4>\n\n\n
      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.<\/p>\n\n\n\n
      The video format optimization<\/a> is done in real-time when you request your S3 video via ImageKit and results in a smaller video size sent to the user.<\/p>\n\n\n\n
      To enable this automatic format conversion<\/a>, you have to enable the corresponding setting in your ImageKit dashboard. No complex setup, no configurations needed.<\/p>\n\n\n\n
      For example, after enabling the above setting, an MP4 video gets delivered in WebM format in Chrome and MP4 in Safari.<\/p>\n\n\n\n
      \"\"
      Same video delivered in WebM format in Chrome browser<\/figcaption><\/figure>\n\n\n
      2. Automatic compression of videos while streaming<\/h4>\n\n\n
      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.<\/p>\n\n\n\n
      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.<\/p>\n\n\n\n
      That is again something ImageKit does for you automatically.<\/p>\n\n\n\n
      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.<\/p>\n\n\n\n
      \"\"
      Turning on automatic quality optimization in the dashboard<\/figcaption><\/figure>\n\n\n\n
      After enabling this setting, ImageKit will encode your video at the specified compression level<\/a> before streaming it to the user’s device.<\/p>\n\n\n\n
      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.<\/p>\n\n\n
      Using real-time video compression for slow network users<\/h4>\n\n\n
      As explained with examples later in this article, ImageKit allows you to transform videos in real-time<\/a>. One of the real-time URL transformations possible in ImageKit is to modify the compression level.<\/p>\n\n\n\n
      This transformation allows us to override the default compression level selected in the dashboard.<\/p>\n\n\n\n
      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.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      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.<\/p>\n\n\n
      3. Scaling S3 videos in real-time while streaming<\/h4>\n\n\n
      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.<\/p>\n\n\n\n
      With ImageKit, you can scale the video to any size in real-time<\/a> 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.<\/p>\n\n\n\n
      For example, we have scaled down our video to a width of 200px using the URL given below<\/a>.<\/p>\n\n\n\n
      https:\/\/ik.imagekit.io\/ikmedia\/videos\/woman-walking.mp4?tr=w-200<\/code><\/pre>\n\n\n\n
      4. Adapting videos to different placeholders and creating vertical videos<\/h4>\n\n\n
      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.<\/p>\n\n\n\n
      A very common use case would be converting your landscape video to a vertical one like an Instagram story.<\/p>\n\n\n\n
      ImageKit makes it super simple with its real-time video transformations<\/a>. You can add the width and height parameters to the video URL<\/a> and get the output video in the requested size.<\/p>\n\n\n\n
      https:\/\/ik.imagekit.io\/ikmedia\/videos\/woman-walking.mp4?tr=w-300,h-500<\/code><\/pre>\n\n\n\n
      Signup with ImageKit for S3 video streaming for free<\/h3>\n\n\n
      ImageKit offers a Forever Free plan<\/a> 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.<\/p>\n\n\n\n
      Sign up now<\/a> for ImageKit to start streaming optimized videos from S3 for free.<\/p>\n\n\n\n
      \n
      Get started for free<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      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 […]<\/p>\n","protected":false},"author":269683,"featured_media":357025,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[508],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/video-streaming-2.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":356370,"url":"https:\/\/css-tricks.com\/videopress-for-wordpress\/","url_meta":{"origin":357012,"position":0},"title":"VideoPress for WordPress","date":"November 9, 2021","format":false,"excerpt":"The leade here is that VideoPress makes video on WordPress way better. VideoPress is a part of Jetpack. And now, if VideoPress is the only thing you care about from the Jetpack world, you can pay for it \u00e0 la carte as low as $4.77\/month. Or, get it included in\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/videopress-jetpack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362940,"url":"https:\/\/css-tricks.com\/css-slanted-containers\/","url_meta":{"origin":357012,"position":1},"title":"How to Make CSS Slanted Containers","date":"February 9, 2022","format":false,"excerpt":"I was updating my portfolio and wanted to use the forward slash (\/) as a visual element for the site\u2019s main layout. I hadn't attempted to create a slanted container in CSS before, but it seemed like it would be easy at first glance. As I began digging into it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/css-slanted-container-example.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334360,"url":"https:\/\/css-tricks.com\/weekly-platform-news-webkit-autofill-using-cursor-pointer-delaying-autoplay-videos\/","url_meta":{"origin":357012,"position":2},"title":"Weekly Platform News: WebKit autofill, Using Cursor Pointer, Delaying Autoplay Videos","date":"February 12, 2021","format":false,"excerpt":"In this week's roundup, WebKit's prefixed autofill becomes a standard, the pointer cursor is for more than just links, and browsers are jumping on board to delay videos set to autoplay until they're in view... plus more! Let's jump right into it. CSS\u00a0::-webkit-autofill\u00a0has become a standard feature Chrome, Safari, and\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/wpn-20210212.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305874,"url":"https:\/\/css-tricks.com\/cloudinary-studio\/","url_meta":{"origin":357012,"position":3},"title":"Cloudinary Studio","date":"April 1, 2020","format":false,"excerpt":"I knew that Cloudinary worked with video as well as images but, the other day, I was curious if Cloudinary offered a video player embed just like other video hosts do (e.g. YouTube, Vimeo, etc). Like an