Adaptive bitrate streaming

Uploadсare allows optimized video streaming by dynamically adjusting the 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.

How it works

Switch on Adaptive video delivery toggle in Delivery section in the Dashboard. The feature will be enabled for 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:

1npm install @uploadcare/uc-video

Connect components from your script file:

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

Add component in your application markup:

1<uc-video
2  uuid=":UUID"
3  controls="true"
4  playsinline="true"
5  showLogo="false"
6/>

Where:

  • uuid - unique file identifier assigned when uploading a video to an Uploadcare project.
  • playsinline - disable auto open for ios.
  • showLogo - removes the Uploadсare logo from the streamed video.

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:

1npm install video-js

Then start processing the video file:

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

Playback speed

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

1const 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:

1npm install videojs-hls-quality-selector

After that import videojs-hls-quality-selector:

1import videojs from "video.js";
2
3import "video.js/dist/video-js.css";
4import 'videojs-hls-quality-selector/dist/videojs-hls-quality-selector.js'
5
6<video id="player" class="video-js vjs-default-skin">
7    <source src="https://ucarecdn.com/:UUID/adaptive_video/" type="application/x-mpegURL">
8</video>
9
10const player = videojs('player', {
11  controls: true,
12  playbackRates: [0.5, 1, 1.5, 2],
13
14  plugins: {
15    hlsQualitySelector: {
16      displayCurrentQuality: true
17     }
18   }
19 }
20)

Or you can add it differently:

1import videojs from "video.js";
2
3import "video.js/dist/video-js.css";
4import 'videojs-hls-quality-selector/dist/videojs-hls-quality-selector.js'
5
6<video id="player" class="video-js vjs-default-skin">
7</video>
8
9const player = videojs('player', {
10  controls: true,
11  html5: {
12    hls: {
13      overrideNative: true,
14    },
15    vhs: { overrideNative: true }
16  },
17  playbackRates: [0.5, 1, 1.5, 2],
18
19  sources: [{
20    src: "https://ucarecdn.com/:UUID/adaptive_video/",
21    type: "application/x-mpegURL"
22  }],
23
24  plugins: {
25    hlsQualitySelector: {
26      displayCurrentQuality: true
27     }
28   }
29 }
30)

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

Each video file has a duration of seconds and several resolution options for the output video.

The resolution is defined as follows:

  • All calculations for video are performed for the smaller side. The larger side can be twice as large as the smaller one.
  • The video resolution is never increased. For example, if the original video is 900p on the smaller side, then instead of 1080p, it will be 900p.
  • The maximum resolution options are three variants: 360p, 720p, and 1080p.
  • If the original video is much smaller than 1080p or 720p, then these modes will not be converted.

Every video variant consists of the following:

  • Each resolution option is billed.
  • 20 operations per 10 seconds.
  • Rounding up 10 seconds.

For example, a 52-second video with three resolutions (360p, 720p, 1080p) requires: (6 × 20 operations) × 3 resolutions = 360 operations

Learn how we charge for operations.

Built with