Bridging the Digital Divide With Adaptive-Bitrate Video

Many people cannot access online video because they’re stuck on the wrong side of the digital divide: the side with slow internet and low-end devices, which cannot handle high-resolution and high-bitrate videos.

The digital divide refers to the disparity in access to computers and to the internet across geographical locations due to socioeconomic or demographic factors. Even in countries with excellent infrastructure, some places, especially suburbs, still have marginal connection speeds. Those with premium internet access in the city might also experience a slower connection while visiting remote locations.

Yet, you as developers usually build websites with the subconscious assumption that viewers are all on the privileged side of the digital divide, which couldn’t be farther from reality. Too bad that such an assumption denies numerous viewers the compelling video experiences you work so hard to build.

This article explains how to make on-demand videos accessible to a broader audience with the Cloudinary Video Player’s built-in adaptive-bitrate capability. Do read on to learn this simple yet effective solution.

What Does Cloudinary’s Adaptive-Bitrate Capability Do?

Slow video buffering and the inability to interact meaningfully with videos can cause visitors to abandon the site. NPAW reports that a buffer ratio of 2% of total playtime causes the churn to climb by 30%—hardly an ideal response for your analytics team.

Videos start faster with fewer slow video-buffering interruptions. Adaptive-bitrate streaming is a video delivery technique that sends the browser multiple streams (called representations) from the same source but with different resolutions, quality, and data rates. The browser then serves the most optimal stream based on the visitor’s device capability and internet connectivity.

Manually implementing adaptive bitrate for videos is complex and labor intensive. Instead, leverage Cloudinary’s adaptive-bitrate feature, which automatically produces and delivers all the necessary representations from a single uploaded video with the HTTP Live Streaming (HLS) or Dynamic Adaptive Streaming over HTTP (MPEG-DASH) protocol, or both.

How Do You Serve Accessible Videos With Adaptive Bitrate?

To serve accessible videos with Cloudinary’s adaptive bitrate, take these three steps:

1. Set up Cloudinary.
2. Upload a video and apply eager transformations.
3. Deliver the video through the Cloudinary Video Player.

Below is a hands-on tutorial. And here’s the project code.

1. Set Up Cloudinary

First, if you haven’t done so yet, sign up for a free Cloudinary account.

Next, create a simple Node.js app by doing the following:

1. Check if node.js is on your computer by typing this command:

   node -v

   If the output does not display a version number like 10.12.5, download and install node.js.

2. Install the Cloudinary Node SDK’s npm package. Type:

   npm install cloudinary --save

3. Import the Cloudinary package to your codebase. Type:

   const cloudinary = require('cloudinary').v2;

4. Configure the SDK with your credentials, whose values are displayed on your Cloudinary dashboard:

cloudinary.config({ 
  cloud_name: '[CLOUD_NAME]', 
  api_key: '[API_KEY]', 
  api_secret: '[API_SECRET]',
  secure: true
});

2. Upload Video and Apply Eager Transformations

You can transform media assets on Cloudinary upon receiving a viewer request or while you’re uploading them (the eager way). Eager transformations ready the assets even before viewers access them for the first time, making available multiple video resolutions to choose from beforehand. That way, Cloudinary can scale the bitrate up or down to match the capabilities of the viewer’s device and internet connection.

For this tutorial, since we’ve uploaded this Pexels video by cottonbro to our Cloudinary account, we'll use the explicit method instead of the upload method.

Now add a streaming profile and a streaming format to perform adaptive-bitrate streaming on the video. A streaming profile defines representations according to suggested best practices. For example, the HD profile you’ll pick creates six representations in a 16:9 aspect ratio, from extremely high quality to low quality, which supports the HLS (M3U8), MPEG-2 (TS, M2TS, and MTS), and MPEG-DASH (MPD) adaptive-streaming formats.

Cloudinary’s explicit API follows this syntax:

cloudinary.uploader.explicit(public_id, options, callback);

So, add the following to your code. For the functions of the parameters, see Cloudinary’s upload API reference.

cloudinary.uploader.explicit(
 'https://res.cloudinary.com/cloudinary-marketing/video/upload/v1638394754/sample-video.mp4',
 {
   resource_type: "video",
   type: "upload",
   eager: [
     {
       streaming_profile: "full_hd",
       format: "m3u8"
     }
   ],
   eager_async: true,
   public_id: "sample-video"
 }
)
 .then((result) => {
   console.log(result);
 })
 .catch(error => console.error(error));

The output looks like this:

{
  asset_id: 'a41add3c234c30c5fd9f518bce40a13d',
  public_id: 'sample-video',
  version: 1633948635,
  version_id: 'c08c1ad9df8e5f4936016f544f8dda94',
  signature: 'fb02d897c58530c03c2aa663e9a3c5edb1fdb16b',
  width: 3840,
  height: 2160,
  format: 'mp4',
  resource_type: 'video',
  created_at: '2021-10-11T10:37:15Z',
  bytes: 45439256,
  type: 'upload',
  url: 'https://res.cloudinary.com/cloudinary-marketing/video/upload/v1638394754/sample-video.mp4',
  secure_url: 'https://res.cloudinary.com/cloudinary-marketing/video/upload/v1638394754/sample-video.mp4',
  eager: [
    {
      status: 'processing',
      batch_id: 'b10cc388b3322b4cf4a39941e9987f4edc37d1c97c267bfa86ac83338fc8e6ff',
      url: 'https://res.cloudinary.com/cloudinary-marketing/video/upload/v1638394754/sample-video.m3u8',
      secure_url: 'https://res.cloudinary.com/cloudinary-marketing/video/upload/v1638394754/sample-video.m3u8'
    }
  ]
}

3. Deliver the Video

Since HTML5 video players for browsers do not natively support the MPEG-DASH and HLS adaptive-bitrate formats, deliver the video through the Cloudinary Video Player. Do the following:

1. Embed the Cloudinary Video Player into your app. The HTML file looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link href="https://unpkg.com/cloudinary-video-player@1.5.5/dist/cld-video-player.min.css" rel="stylesheet">
   <script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js"
       type="text/javascript"></script>
   <script src="https://unpkg.com/cloudinary-video-player@1.5.5/dist/cld-video-player.min.js"
       type="text/javascript"></script>
</head>

2. Pass the video’s source file to the player method and specify the streaming profile—the same one that you specified for the eager transformation.

This demo below shows how the Cloudinary Video Player uses Chrome developer tools to harness adaptive-bitrate functions in order to automatically adapt to a device’s characteristics and internet-connection speed.

How Do You Make Videos Accessible?

Cloudinary’s bitrate-adaptive feature for video ensures universal access to your site’s videos. Visitors with slow internet can view them without lag while those with a fast connection enjoy top-quality footage.

Now that you’ve learned how easy it is to transform videos, why not enhance your site’s accessibility and bridge the digital divide with the Cloudinary Video Player? Visitors to an online store can then check out the product details and demos; prospective home buyers can explore the details of real-estate listings; and readers of travel blogs can watch various adventures—even while on the go.

The Cloudinary Video Player renders videos accessible to a wider audience and grows your user base. Do try it out.

About the Author

Linda Ikechukwu is a frontend developer, building web interfaces that connect products and brands to their target users.