Improve Video Streaming Next.js app with Adaptive Bitrate Streaming (ABR) and the CldVideoPlayer component from Next Cloudinary.

Add Adaptive Bitrate Streaming to a video using the CldVideoPlayer component, use the following code:

import { CldVideoPlayer } from 'next-cloudinary';
import 'next-cloudinary/dist/cld-video-player.css';

<CldVideoPlayer
  width="1920"
  height="1080"
  src="samples/sea-turtle"
  sourceTypes={['hls']} // <-- Add HLS as a source type or dash for MPEG-DASH
  transformation={{
    // <-- Add transformation prop
    streaming_profile: 'hd', // <-- Add streaming profile
  }}
/>

When using the app router, create a wrapper client component for the video player.

Refer to the CldVideoPlayer.tsx file

"use client";

import { CldVideoPlayer as VideoPlayer } from 'next-cloudinary';

export default function CldVideoPlayer(props) {
    return <VideoPlayer {...props} />
}

See the component in action at app/page.tsx.

Or learn more on the docs.

• Clone this project with degit

npx degit cloudinary-community/cloudinary-examples/examples/nextjs-cldvideoplayer-abr nextjs-cldvideoplayer-abr

• Install the project dependencies with:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

• Add your cloud name as an environment variable inside .env.local:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

• Start the development server with:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun run dev

• Visit the project at http://localhost:3000!