How to serve video & audio with Uploadcare video CDN

Videos and audio are important parts of today’s web experiences. They effectively captivate users and enhance storytelling. But it can be challenging to serve high-quality media content quickly and reliably.

Uploadcare’s Video CDN simplifies this by handling all the heavy lifting. With adaptive HLS streaming, automatic format conversion, and a global-edge network, you can serve high-quality video and audio without infrastructure headaches.

In this guide, you will learn how to leverage Uploadcare’s Video CDN to reliably and efficiently serve video and audio content.

Prerequisites

To follow along with this tutorial, you’ll need:

• A paid Uploadcare account
• Video or audio files uploaded to Uploadcare
• Basic knowledge of HTML and JavaScript

How to upload video and audio files to Uploadcare

To serve video and audio with Uploadcare’s CDN, you first need to upload your media files. You can do this via the Uploadcare dashboard, API, or file uploader widget.

With the dashboard:

1. Log in to your Uploadcare dashboard
2. Navigate to the Files section
3. Click Upload new files to open the file uploader dialog
4. Choose files from your computer, cloud storage, or URL
5. Your files will upload in the background and appear in your file list

Once uploaded, your files are automatically delivered via Uploadcare’s CDN with URLs in this format:

https://<domain>.ucarecdn.com/<uuid>/<filename>

Where:

• <domain>: Your Uploadcare CDN domain (found in your dashboard’s delivery settings)
• <uuid>: A unique identifier for your file on Uploadcare
• <filename>: The original filename of your media

You can now use this CDN URL directly in your <video> and <audio> elements, or combine them with Uploadcare’s video processing features for on-the-fly format conversion and optimization.

How to serve video files using Uploadcare Video CDN

Using the CDN URL, you can embed video files directly into your web pages.

Basic video delivery with HTML5 and Uploadcare CDN

Using the standard <video> element combined with the <source> element, you can create multiple video formats for better browser compatibility. You may also include a fallback message, which can be used when a client’s browser does not support the HTML5 video element:

<video width="640" height="360" controls>
  <source 
    src="https://6ca2u7ybx5.ucarecd.net/415615fe-80e4-4fe8-88d7-b89e5e120d55/video.webm" 
    type="video/webm" 
  />
  <source 
    src="https://6ca2u7ybx5.ucarecd.net/415615fe-80e4-4fe8-88d7-b89e5e120d55/video.mp4" 
    type="video/mp4" 
  />
  <p>
    Your browser does not support HTML5 video. 
    <a href="https://6ca2u7ybx5.ucarecd.net/415615fe-80e4-4fe8-88d7-b89e5e120d55/video.mp4">
      Download the MP4 version instead
    </a>.
  </p>
</video>

Video format conversion

Instead of manually uploading multiple versions of your video in different formats, Uploadcare’s video processing can help you generate multiple versions of your video using a single source file to something like this:

<video width="640" height="360" controls>
  <source 
    src="https://6ca2u7ybx5.ucarecd.net/415615fe-80e4-4fe8-88d7-b89e5e120d55/-/format/webm/example.webm" 
    type="video/webm" 
  />
  <source 
    src="https://6ca2u7ybx5.ucarecd.net/415615fe-80e4-4fe8-88d7-b89e5e120d55/video/-/format/mp4/example.mp4" 
    type="video/mp4" 
  />
  <p>
    Your browser does not support HTML5 video. 
    <a href="https://6ca2u7ybx5.ucarecd.net/415615fe-80e4-4fe8-88d7-b89e5e120d55/video/-/format/mp4/example.mp4">
      Download the MP4 version
    </a>.
  </p>
</video>

This video encoding however uses Uploadcare’s REST API and requires you to create an asynchronous encoding job first and then receive the resulting video URLs once the processing is complete.

For more information on video processing with Uploadcare, check out the video encoding documentation.

Converting animated GIFs to video

Uploadcare can help you convert your animated GIFs to video format when you need to save bandwidth.

Converting a GIF to video format can reduce file size by up to 80% while maintaining visual quality:

<video width="340" autoplay loop muted webkit-playsinline playsinline>
  <source 
    src="https://6ca2u7ybx5.ucarecd.net/024b5446-250f-4c75-be91-0a0fca80c1b6/gif2video/-/format/webm/sample.webm" 
    type="video/webm" 
  />
  <source 
    src="https://6ca2u7ybx5.ucarecd.net/024b5446-250f-4c75-be91-0a0fca80c1b6/gif2video/-/format/mp4/sample.mp4" 
    type="video/mp4" 
  />
</video>

The gif2video transformation automatically converts your GIF to a video. This offers several benefits over using a GIF directly:

• Smaller file sizes: Video compression is far more efficient than GIF encoding, for example: the above example GIF is 1 MB, while the WebM video is only 50 KB and the MP4 is 59 KB.
• Faster loading: Reduces bandwidth requirements
• Better quality: Video codecs preserve visual quality better than GIFs

Enabling adaptive bitrate streaming

Aside from serving different video formats, Uploadcare Video CDN also supports Adaptive bitrate streaming (ABR). ABR streaming is a video delivery technique that automatically adjusts video quality based on the viewer’s network conditions and device capabilities.

Users with slow connections receive lower resolution versions to avoid buffering, while users on fast connections enjoy high-quality versions of the same content.

To use adaptive bitrate streaming with Uploadcare, you need to enable it in your dashboard settings and then serve the video using a video player that supports HLS streaming.

Enable ABR in your dashboard

1. Log in to your Uploadcare dashboard
2. Navigate to Settings → Delivery
3. Toggle Adaptive bitrate streaming to enable it

Enable Adaptive bitrate streaming

Once enabled, Uploadcare automatically generates HLS (HTTP Live Streaming) manifests for all your video files.

For the video URL, append /adaptive_video/ to your video URL to inform the CDN to serve the video using adaptive bitrate streaming:

https://6ca2u7ybx5.ucarecd.net/415615fe-80e4-4fe8-88d7-b89e5e120d55/adaptive_video/

Note: you’ll also need to add a video type of application/x-mpegURL to the <source> element in your HTML.

Benefits of adaptive bitrate streaming

• Reduced buffering: ABR ensures smooth playback even on unreliable networks. The quality automatically adjusts to prevent stalling.

• Optimized quality per device: A mobile user on 4G gets a different quality than a desktop user on fiber. Each viewer gets the best experience for their conditions.

• Lower bandwidth costs: By serving lower-quality content to users who don’t need high-quality content, you reduce bandwidth consumption and costs.

• Better user experience: Users don’t experience the frustration of constant buffering or unexpected quality drops. Playback is smooth and uninterrupted.

• Faster start times: Adaptive bitrate streaming allows viewers to start watching immediately while higher quality segments download in the background.

Serving videos with adaptive streaming

To take advantage of Uploadcare’s adaptive bitrate streaming, you need a video player that supports HLS. This could be a popular library like Video.js, Plyr, or even native HTML5 video with HLS.js.

Check out this guide on how to build a custom video player with ABR support from scratch using HLS.js

Uploadcare also provides a lightweight web component, uc-video, that makes it easy to embed adaptive videos with minimal setup in any web application.

Using Video.js for adaptive streaming

Video.js is a popular, open-source HTML5 video player that supports HLS streaming out of the box.

To use it, first include the Video.js library in your page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link href="https://vjs.zencdn.net/8.23.4/video-js.css" rel="stylesheet" />
  </head>
  <body>
    <!-- Your video element will go here -->
  
    <script src="https://vjs.zencdn.net/8.23.4/video.min.js"></script>
  </body>
</html>

Or install it via npm:

npm install video.js

Then, add the Video.js element to your webpage calling the adaptive video URL:

<video
  id="my-video"
  class="video-js"
  controls
  width="640"
  height="360"
  data-setup="{}"
>
  <source
    src="https://6ca2u7ybx5.ucarecd.net/415615fe-80e4-4fe8-88d7-b89e5e120d55/adaptive_video/"
    type="application/x-mpegURL"
  />

  <p class="vjs-no-js">
    To view this video, please enable JavaScript and consider upgrading to a
    web browser that
    <a 
      href="https://videojs.com/html5-video-support/" 
      target="_blank"
    >supports HTML5 video</a>
  </p>
</video>

This will create a Video.js player that automatically handles adaptive bitrate streaming using Uploadcare’s Video CDN.

Using the uc-video component

Uploadcare’s uc-video component is a native web component that makes serving adaptive video even simpler. It abstracts away the complexity of setting up HLS streaming and provides a clean API for embedding videos.

<uc-video
  uuid="415615fe-80e4-4fe8-88d7-b89e5e120d55"
  controls="true"
/>

To use the uc-video component, first include it in your project.

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uploadcare/uc-video/dist/uc-video.js';
</script>

Or install it via npm:

npm install @uploadcare/uc-video

Then, import it in your JavaScript file:

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

You can then use the uc-video tag in your HTML, providing the UUID of your video file:

<uc-video
  uuid="415615fe-80e4-4fe8-88d7-b89e5e120d55"
  controls="true"
  playsinline="true"
  showLogo="false"
></uc-video>

Where uuid is the unique identifier of your video file on Uploadcare.

Advantages of using the uc-video component

• Built specifically for Uploadcare video delivery
• Automatic HLS support with video quality selection built-in
• Cleaner syntax with less boilerplate, as you only need to provide the UUID

Serving audio files

While Uploadcare does not support encoding audio files, you can serve optimized audio files using Uploadcare’s CDN with the HTML5 <audio> element by providing multiple audio formats for better browser compatibility.

Let’s implement the <audio> element holding three versions of the sound sample provided by Skydiver. All three of those are delivered via our CDN.

<audio controls>
  <source 
    src="https://6ca2u7ybx5.ucarecd.net/8882cd55-579d-4862-bd7f-5fe31c01f4cf/detroitkeys.ogg" 
    type="audio/ogg; codecs=vorbis"
  />
  <source 
    src="https://6ca2u7ybx5.ucarecd.net/b562207b-6d52-4fdb-8dcf-254c696513cb/detroitkeys.mp3" 
    type="audio/mpeg"
  />
  <source 
    src="https://6ca2u7ybx5.ucarecd.net/b0546f37-d1d4-4dcf-95b1-1a581ca463c7/detroitkeys.wav" 
    type="audio/wav"
  />

  Your browser does not support the <code>audio</code> element.
  However, you can

  <a href="https://6ca2u7ybx5.ucarecd.net/b562207b-6d52-4fdb-8dcf-254c696513cb/detroitkeys.mp3">
    download
  </a>

  the MP3 version of the audio.
</audio>

Conclusion

Uploadcare’s Video CDN enables you to serve optimized video content to your users while removing the complexity of serving media at scale.

With support for video transcoding and adaptive bitrate streaming, you can focus on building great experiences instead of managing video infrastructure.

To get started, check out the following resources:

• Video CDN documentation
• Advanced video processing
• uc-video component

Happy streaming!