Getting started

Integration & migration

Image & video API

DAM user guide

API overview

Account

Adaptive Bitrate Streaming

Learn how to use Adaptive Bitrate Streaming for long videos with ImageKit.


Adaptive Bitrate Streaming (ABS) enables the optimum streaming video viewing experience for different types of devices over a broad set of connection speeds. This results in very little buffering, a fast start time and a good experience for both high-end and low-end connections.

The client (e.g. a video player) loads the manifest file and then chooses an appropriate segment, usually starting from the lowest bit rate stream to speed up initial playback. If network throughput is greater than the bit rate of the downloaded segment, it requests a higher bit rate segment. The client continues to adapt to changes in network throughput to ensure a smooth playback experience. The exact algorithm of choosing which segment to load can vary from client to client, but fundamentally it remains the same -- choose the appropriate segment and adapt as network (or other device constraints) changes.

For ABS to work, the client needs a manifest file that contains information about segments of different variants at varying bitrates. ImageKit can generate and deliver all necessary variants and manifest files from a single source video that is accessible through your ImageKit's account. The original video can be hosted in the ImageKit Storage or external storage integrated with ImageKit. Extra storage created because of generated variants and manifest files is counted towards your media library storage.

ImageKit supports the following streaming protocols. Both leverage existing HTTP infrastructure including CDN caching.

  • HTTP Live Streaming (HLS)
  • Dynamic Adaptive Streaming over HTTP (MPEG-DASH) protocol

Live demo

See the live demo along with code examples for both HLS and DASH.

https://imagekit.io/use-cases/adaptive-bitrate-streaming-videos

Copy
<html>
<head>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>

<!-- 
  Original video URL is https://ik.imagekit.io/ikmedia/sample-video.mp4
  We need to append /ik-master.m3u8?tr=sr-240_360_480_720 to generate HLS manifest and four variants at differernt resolutions i.e. 240p, 360p, 480p and 720p.
  Read more about it from the docs https://imagekit.io/docs/adaptive-bitrate-streaming
-->
<body>
  <video-js id="example-video" class="vjs-default-skin" controls>
    <source 
        src="https://ik.imagekit.io/ikmedia/sample-video.mp4/ik-master.m3u8?tr=sr-240_360_480_720"
        type="application/x-mpegURL">
    </source>
  </video-js>

  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-quality-levels@2.1.0/dist/videojs-contrib-quality-levels.js"></script>
  <script src="https://unpkg.com/videojs-http-source-selector/dist/videojs-http-source-selector.js"></script>

  <script>
    var options = {
      plugins: {
        httpSourceSelector:
        {
          default: 'auto'
        }
      }
    };
    var player = videojs('example-video', options);
    player.httpSourceSelector();
  </script>
</body>
</html>

HTTP Live Streaming (HLS)

The following URL will generate HLS manifest and five variants at different resolutions i.e. 240p, 360p, 480p, 720p and 1080p.

Copy
https://ik.imagekit.io/demo/sample-video.mp4/ik-master.m3u8?tr=sr-240_360_480_720_1080

Dynamic Adaptive Streaming over HTTP (MPEG-DASH) protocol

The following URL will generate a DASH manifest and five variants at different resolutions i.e. 240p, 360p, 480p, 720p and 1080p.

Copy
https://ik.imagekit.io/demo/sample-video.mp4/ik-master.mpd?tr=sr-240_360_480_720_1080

The first time you access the manifest URL, a 202 HTTP status code is returned with an empty response. In the background, ImageKit will generate the required variants as per the value of sr. It could take a few seconds to a few minutes for this to finish. This also depends on the video file size and your origin location. The next time you request the same URL, a manifest file is returned in the response with a 200 status code.

Representations

Use sr-<representations> transformation to generate the master manifest file for DASH along with necessary variants and segments.

representations is the list of different representations you want to create separated by an underscore _.

List of supported representations

sr-<representations> transformation is used to specify representations you want to create separated by an underscore _. Here is the list of supported representations for both HLS and DASH.

RepresentationsResolutionMax BitrateVideo CodecAudio CodecFormat
240426x240200Kh264aacmp4
360640x360400Kh264aacmp4
480854x480800Kh264aacmp4
7201280x7203300Kh264aacmp4
10801920x10805500Kh264aacmp4
14402560x144012000Kh264aacmp4
21603840x216018000Kh264aacmp4

ImageKit uses H.264 codec for encoding video and AAC for encoding audio for both HLS and DASH.

All ABS representations will use at_max cropping strategy to resize the representations. Output will match the aspect ratio of the original video after this change.

Transformation

You can transform the final video using any supported video transformation parameter in ImageKit except w, h, ar, f, vc, ac, and q.