Adaptive bitrate streaming

Focus on producing engaging videos and leverage ImageKit to generate manifest files for adaptive bitrate streaming.

Code snippets

HLS and DASH example

See the example of adaptive bitrate streaming using the video.js library. Change quality, page width, and reload to see how adaptive bitrate streaming works. Learn more from ABS documentation.

HLS

DASH

<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://docs.imagekit.io/features/video-transformation/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://docs.imagekit.io/features/video-transformation/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>