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/cloudflare-video

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

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/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.

<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

<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';

{ play(): Promise<void> | void; pause(): void; addEventListener(type: string, listener: ((event: Event) => void)): void; removeEventListener(type: string, listener: ((event: Event) => void)): void; src: string; currentTime: number; volume: number; muted: boolean; playbackRate: number; loop: boolean; autoplay: boolean; controls: boolean; preload: string; poster: string; paused: boolean; ended: boolean; seeking: boolean; duration: number; buffered: TimeRanges; played: TimeRanges; videoWidth: number; videoHeight: number } | null

{ length: number; start(index: number): number; end(index: number): number }

{ src?: string; engine?: CloudflareSourceEngineConfig } | null

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