Adaptive bitrate streaming

Uploadcare allows optimized video streaming with adaptive bitrate streaming, dynamically adjusting video quality based on the viewer’s device capabilities and internet connection speed.

HLS is used as the video delivery protocol, which ensures that end-users always receive the best possible video quality regardless of the type of device used and without unnecessary data consumption.

Upload a video file to the server and instantly receive a link to stream the adaptive video. After processing, the video can be cached like all other files. The file size is determined by the general project settings.

Availability

• Available on all plans
• Enabled by default for new projects
• Existing projects can enable it in project settings
• Requires video upload and processing

How it works

Adaptive bitrate streaming is enabled by default for new projects.
For existing projects, you can enable it in the Delivery section. The feature will be applied to all video files uploaded to this project.

uc-video solution

Use uc-video - our solution, powered by Video.js.

Pre-install before starting to work with video:

1
npm install @uploadcare/uc-video

Connect components from your script file:

1
import '@uploadcare/uc-video';
2
import '@uploadcare/uc-video/style'

Add component in your application markup:

1
<uc-video
2
  cdnCname="https://:subdomain.ucarecd.net/"
3
  uuid=":UUID"
4
  controls
5
  playsinline
6
  showLogo="false"
7
/>

Uploadcare parameters:

• cdnCname — Your delivery subdomain. Find it in Delivery.
• uuid — Unique file identifier assigned when uploading a video.
• showLogo — Set to "false" to hide the Uploadcare logo.

Account type:

• New projects created after September 4, 2025 use personal delivery subdomains (*.ucarecd.net) and must include cdnCname.
• Legacy projects created before September 4, 2025 use the shared ucarecdn.com domain, where cdnCname is optional (auto-detected).

Video.js / HTML attributes:

• controls — Display player controls
• playsinline — Prevent fullscreen auto-open on iOS

For a complete list of parameters, see the uc-video package documentation.

Learn more about delivery domains in CDN and Proxy domains.

JS video player

Use Video.js (an open-source HTML5 player library) or any JS video player that supports HLS.

Pre-install before starting to work with video:

1
npm install video-js

Then start displaying the video file:

1
<video id="player" class="video-js" width="720">
2
    <source src="https://:subdomain.ucarecd.net/:UUID/adaptive_video/" type="application/x-mpegURL" />
3
</video>

:subdomain is your project’s subdomain — find it in Delivery.

Playback speed

If you want to choose the video playback speed, you need to add playbackRates:

1
const player = videojs('player', {
2
		playbackRates: [0.5, 1, 1.5, 2]
3
    }
4
  )

An array of numbers strictly greater than 0, where 1 means regular speed (100%), 0.5 means half-speed (50%), 2 means double-speed (200%), etc. For more information about the vjs-playback-rate video playback rate control, see the Video.js Options Reference.

Quality selector

uc-video solution

If you use uc-video solution, the quality selector is already built-in.

JS video player

If you use a different player, it is also possible to implement a quality selector.

First, install:

1
npm install videojs-hls-quality-selector

After that import videojs-hls-quality-selector:

1
import videojs from "video.js";
2
import "video.js/dist/video-js.css";
3
import 'videojs-hls-quality-selector/dist/videojs-hls-quality-selector.js'

1
<video id="player" class="video-js vjs-default-skin">
2
    <source src="https://:subdomain.ucarecd.net/:UUID/adaptive_video/" type="application/x-mpegURL">
3
</video>

1
const player = videojs('player', {
2
  controls: true,
3
  playbackRates: [0.5, 1, 1.5, 2],
4
  plugins: {
5
    hlsQualitySelector: {
6
      displayCurrentQuality: true
7
     }
8
   }
9
 }
10
)

Or you can add it differently:

1
import videojs from "video.js";
2
import "video.js/dist/video-js.css";
3
import 'videojs-hls-quality-selector/dist/videojs-hls-quality-selector.js'

1
<video id="player" class="video-js vjs-default-skin">
2
</video>

1
const player = videojs('player', {
2
  controls: true,
3
  html5: {
4
    hls: {
5
      overrideNative: true,
6
    },
7
    vhs: { overrideNative: true }
8
  },
9
  playbackRates: [0.5, 1, 1.5, 2],
10
  sources: [{
11
    src: "https://:subdomain.ucarecd.net/:UUID/adaptive_video/",
12
    type: "application/x-mpegURL"
13
  }],
14
  plugins: {
15
    hlsQualitySelector: {
16
      displayCurrentQuality: true
17
     }
18
   }
19
 }
20
)

Signed URLs

Restrict access to video links via signed URLs.

Note that this function works when using a custom CNAME.

Analytics

Check the Analytics tab in the Dashboard for details on CDN traffic and operations performed.

Billing

• Charges apply based on usage. Learn how we charge for Adaptive bitrate streaming operations.