cloudflare-video

Cloudflare Stream runs in an embedded player. Its own chrome stays hidden by default, so it drops into a player skin like any other media component; set controls to use Cloudflare’s UI instead.

Import

pnpm add @videojs/react @videojs/cloudflare-video

pnpm add @videojs/html @videojs/cloudflare-video

import { CloudflareVideo } from '@videojs/react/media/cloudflare-video';

import '@videojs/html/media/cloudflare-video';

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-beta.32/media/cloudflare-video.js"></script>

Load a source

src takes a raw 32-character video UID, any cloudflarestream.com or videodelivery.net URL, or a signed token. Watch, embed, iframe, manifest, and thumbnail URLs all carry the UID in the same position, and a signed token stands in for the UID wherever one appears.

<CloudflareVideo src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4" />

<cloudflare-video src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4"></cloudflare-video>

Signed playback

For signed URLs, pass the signed token wherever the UID would go: as the whole src, or inside a Stream URL. Keep your customer subdomain when your URLs name one. Cloudflare serves signed and access-controlled videos only from customer-<code>.cloudflarestream.com, so the element preserves that origin instead of collapsing it onto the shared host.

Behavior

A few things work differently from a native <video> element, because the Stream embed doesn’t expose them:

• The embed owns text tracks: textTracks stays empty, and engine.cloudflare.defaultTextTrack picks the track to show.
• Picture-in-picture is unavailable, and the player reports it as unsupported.
• Fullscreen targets the iframe, so Cloudflare’s own chrome shows in fullscreen.
• playsInline has no effect: the Stream embed always plays inline.

Examples

Basic Usage

import { CloudflareVideo } from '@videojs/react/media/cloudflare-video';

export default function BasicUsage() {
  return (
    <div className="cloudflare-video">
      <CloudflareVideo src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4" controls />
    </div>
  );
}

.cloudflare-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

<cloudflare-video class="cloudflare-video" src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4" controls></cloudflare-video>

.cloudflare-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

import '@videojs/html/media/cloudflare-video';

<CloudflareVideo
  source={{
    src: 'bfbd585059e33391d67b0f1d15fe6ea4',
    engine: { cloudflare: { primaryColor: '#f03e3e', startTime: '5m30s' } },
  }}
/>

const video = document.querySelector('cloudflare-video');
video.source = {
  src: 'bfbd585059e33391d67b0f1d15fe6ea4',
  engine: { cloudflare: { primaryColor: '#f03e3e', startTime: '5m30s' } },
};