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
<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>
<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.mpd?tr=sr-240_360_480_720 to generate DASH 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.mpd?tr=sr-240_360_480_720" type="application/dash+xml"> </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.
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.
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.
Representations | Resolution | Max Bitrate | Video Codec | Audio Codec | Format |
---|---|---|---|---|---|
240 | 426x240 | 200K | h264 | aac | mp4 |
360 | 640x360 | 400K | h264 | aac | mp4 |
480 | 854x480 | 800K | h264 | aac | mp4 |
720 | 1280x720 | 3300K | h264 | aac | mp4 |
1080 | 1920x1080 | 5500K | h264 | aac | mp4 |
1440 | 2560x1440 | 12000K | h264 | aac | mp4 |
2160 | 3840x2160 | 18000K | h264 | aac | mp4 |
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
.