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.

Video processing settings

Configure codec and resolution settings for your project from the Delivery section. These settings apply to all videos in the project.

Codec selection

For each resolution, you can select H.264, H.265, or both.

H.264 is the default and provides instant, universal playback. HLS becomes available immediately after upload, and H.264 plays on every device. At least one H.264 rendition is required.

H.265 offers up to 50% smaller file sizes, but renditions are only available after full processing completes. Browser and device support is also more limited. See browser compatibility.

Both is the recommended choice for higher resolutions (1440p, 2160p): capable devices get the bandwidth savings of H.265, while everyone else still plays H.264 instantly.

Resolution selection

Available resolutions: 240p, 360p, 480p, 576p, 720p, 1080p, 1440p, 2160p (4K).

Default preset: 360p, 720p, 1080p (H.264 only).

• Minimum 1 resolution must be selected; maximum 8.
• At least one selected resolution must be ≥ 360p.
• No upscaling: if the source resolution is lower than a selected resolution, that resolution is skipped during processing.
• Higher resolutions (1440p, 2160p) incur higher billing costs and longer processing times.

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

• Billing rates vary by codec and resolution. Learn how we charge for Adaptive bitrate streaming operations.