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>