Video CDN and Streaming Configuration
Video is the heaviest content type. Direct delivery from server kills bandwidth. Video CDN solves delivery, transcoding to different qualities, and adaptive bitrate (ABR).
Cloudflare Stream
# Upload video via API
curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account_id}/stream" \
-H "Authorization: Bearer {token}" \
-F [email protected] \
-F meta='{"name":"Product Demo"}'
# Response:
# {
# "uid": "abc123",
# "thumbnail": "https://videodelivery.net/abc123/thumbnails/thumbnail.jpg",
# "playback": {
# "hls": "https://videodelivery.net/abc123/manifest/video.m3u8",
# "dash": "https://videodelivery.net/abc123/manifest/video.mpd"
# }
# }
// React component with Cloudflare Stream player
import { Stream } from '@cloudflare/stream-react';
export function VideoPlayer({ videoId }: { videoId: string }) {
return (
<Stream
src={videoId}
controls
responsive
preload="metadata"
poster={`https://videodelivery.net/${videoId}/thumbnails/thumbnail.jpg?time=5s&width=640`}
/>
);
}
Cloudflare Stream Benefits:
- Auto transcoding to 360p/480p/720p/1080p/1440p
- HLS + DASH adaptive bitrate
- Global CDN without extra setup
- Download protection (signed URLs)
Mux: Professional Platform
// Node.js SDK
import Mux from '@mux/mux-node';
const mux = new Mux({
tokenId: process.env.MUX_TOKEN_ID!,
tokenSecret: process.env.MUX_TOKEN_SECRET!,
});
// Create Asset from URL
const asset = await mux.video.assets.create({
input: [{ url: 'https://storage.mysite.com/raw/video.mp4' }],
playback_policy: ['public'],
encoding_tier: 'baseline', // or 'smart' for smart encoding
mp4_support: 'standard', // for download
});
console.log(asset.playback_ids?.[0]?.id);
// → playback_id for player
// Mux Player (built-in player)
import MuxPlayer from '@mux/mux-player-react';
<MuxPlayer
playbackId={playbackId}
streamType="on-demand"
accentColor="#FF0000"
thumbnailTime={15}
metadata={{
video_title: 'Product Demo',
viewer_user_id: userId,
}}
/>
// Signed URLs for private content
const token = await mux.jwt.signPlaybackId(playbackId, {
type: 'video',
expiration: '6h',
params: {
aud: 'v', // video
},
});
// URL with signature
const signedUrl = `https://stream.mux.com/${playbackId}.m3u8?token=${token}`;
Self-Hosted HLS via FFmpeg + S3
Cloudflare Stream or Mux setup with player — 1–2 working days. Custom HLS pipeline with FFmpeg and S3 — 3–5 days.