Cloudflare Stream: Complete Video Platform Guide

Serverless video streaming platform with upload, encoding, delivery, and playback - all in one API.

⚠️ Important Disclaimer

This website is for educational and technical demonstration purposes only.

Billing metrics, pricing information, and cost calculations shown on this page may change without notice and should not be relied upon for financial planning or decision-making. Always refer to the official Cloudflare pricing page or your Account Team and your Cloudflare Dashboard for current, accurate pricing information. The purpose of this website is solely to showcase the technical aspects and capabilities of Cloudflare Stream.

📊 What is Cloudflare Stream?

Stream is an end-to-end video platform that handles:

Upload: Direct uploads, link-based uploads, or creator uploads
Storage & Encoding: Automatic multi-resolution encoding
Delivery: Global CDN delivery via HLS/DASH
Playback: Built-in player or use your own
Analytics: Detailed viewing metrics
Live Streaming: RTMPS/SRT live input with recording

🎬 Use Case 1: Stream Player (iframe Embed)

Best for: Quick implementation, zero coding, responsive player with controls

Basic Player

The Stream Player is a customizable HTML5 video player that works on all devices.

<!-- Basic Stream Player Embed -->
<iframe
  src="https://customer-grc8061j89j7i9ew.cloudflarestream.com/889e6355765e5aebddaf195ef6ecb2b2/iframe"
  style="border: none"
  height="720"
  width="1280"
  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
  allowfullscreen="true"
></iframe>

Player with Custom Controls

Add query parameters to customize player behavior:

Autoplay (muted)

?autoplay=true&muted=true

Loop & Preload

?loop=true&preload=auto

Custom Primary Color & Start Time

?primaryColor=%2328a745&startTime=3s

Available Player Options

autoplay muted loop controls preload poster primaryColor letterboxColor startTime defaultTextTrack ad-url

Pros & Cons

✓ Zero code required
✓ Responsive out of the box
✓ Automatic quality switching (ABR)
✓ Built-in controls
✓ Mobile & desktop optimized

✗ Limited UI customization
✗ Cloudflare branding in debug mode

📱 Use Case 2: Direct MP4 Download for Product Pages

Best for: Short videos, product demos, embedded content without player UI

Stream can provide direct MP4 downloads for use in native HTML5 video tags or for downloads. Perfect for short clips on product pages.

MP4 Download URL

https://customer-grc8061j89j7i9ew.cloudflarestream.com/889e6355765e5aebddaf195ef6ecb2b2/downloads/default.mp4

Native HTML5 Video Player

<video controls poster="...thumbnail.jpg">
  <source src="https://customer-grc8061j89j7i9ew.cloudflarestream.com/889e6355765e5aebddaf195ef6ecb2b2/downloads/default.mp4" type="video/mp4">
</video>

Pros & Cons

✓ Simple HTML5 video tag
✓ Full control over player UI
✓ Works offline once downloaded
✓ No JavaScript required

✗ No adaptive bitrate
✗ Larger file size
✗ Requires downloads enabled
✗ Downloads count toward delivery minutes

🎥 Use Case 3: Custom Player with HLS/DASH

Best for: Custom branding, advanced features, third-party players

Use your own video player with Stream's HLS or DASH manifests. Compatible with VideoJS, JW Player, Plyr, and more.

HLS Manifest URL

https://customer-grc8061j89j7i9ew.cloudflarestream.com/889e6355765e5aebddaf195ef6ecb2b2/manifest/video.m3u8

DASH Manifest URL

https://customer-grc8061j89j7i9ew.cloudflarestream.com/889e6355765e5aebddaf195ef6ecb2b2/manifest/video.mpd

Custom Player Example (HLS.js)

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="custom-player" controls></video>

<script>
  var video = document.getElementById('custom-player');
  var videoSrc = 'https://customer-grc8061j89j7i9ew.cloudflarestream.com/889e6355765e5aebddaf195ef6ecb2b2/manifest/video.m3u8';
  
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
  }
</script>

Pros & Cons

✓ Full UI customization
✓ Adaptive bitrate streaming
✓ Works with any HLS/DASH player
✓ Advanced analytics integration

✗ Requires JavaScript library
✗ More complex implementation
✗ Need to handle cross-browser support

✂️ Use Case 4: Media Transformations (/cdn-cgi/media)

Best for: Transform videos stored outside Stream - optimize, clip, resize, extract frames & audio

Use the /cdn-cgi/media path to dynamically transform videos from your origin (GCS, S3, R2, etc.) without writing code. Cloudflare caches transformed outputs globally.

📊 Pricing (GA as of Nov 1, 2025): $0.50 per 1,000 unique transformations/month with 5,000 free transformations included.

Still frame (image): 1 transformation
Video/audio output: 1 transformation per second of output
Each unique combination of input + options is billed once per month

URL Format

https://your-zone.com/cdn-cgi/media/<OPTIONS>/<SOURCE-VIDEO-URL>

Example:
https://public-r2.vence.fun/cdn-cgi/media/mode=video,time=5s,duration=5s,width=500/vids/time.mp4

Original Video

Source: http://public-r2.vence.fun/vids/time.mp4 (20 seconds, stored in R2)

// Direct video URL (no transformations)
<video controls>
  <source src="http://public-r2.vence.fun/vids/time.mp4" type="video/mp4">
</video>

Transformation 1: Clip First 5 Seconds

Extract just the first 5 seconds as an optimized MP4

<video controls>
  <source src="http://public-r2.vence.fun/cdn-cgi/media/mode=video,time=0s,duration=5s/vids/time.mp4" type="video/mp4">
</video>

Parameters:
- mode=video: Output optimized MP4
- time=0s: Start at beginning
- duration=5s: Extract 5 seconds

Transformation 2: Clip Middle Section (5s-10s)

Extract 5 seconds from the middle (seconds 5-10)

<source src="http://public-r2.vence.fun/cdn-cgi/media/mode=video,time=5s,duration=5s/vids/time.mp4">

Parameters:
- time=5s: Start at 5 seconds
- duration=5s: Extract 5 seconds (until 10s)

Transformation 3: Resize to Square (500x500)

Clip and resize to square format, perfect for social media

<source src="http://public-r2.vence.fun/cdn-cgi/media/mode=video,time=2s,duration=8s,width=500,height=500,fit=cover/vids/time.mp4">

Parameters:
- time=2s, duration=8s: Clip middle section
- width=500, height=500: Square dimensions
- fit=cover: Scale and crop to fill

Transformation 4: Extract Still Frame

Extract a single frame as a JPEG image (perfect for thumbnails)

time=2s

time=7s

time=15s

<img src="http://public-r2.vence.fun/cdn-cgi/media/mode=frame,time=7s,format=jpg/vids/time.mp4">

Parameters:
- mode=frame: Extract still image
- time=7s: At 7 second mark
- format=jpg: Output as JPEG (or png)

Transformation 5: Resized Frame (300x200)

Extract and resize a frame - perfect for responsive thumbnails

<img src="http://public-r2.vence.fun/cdn-cgi/media/mode=frame,time=5s,width=300,height=200,fit=cover,format=jpg/vids/time.mp4">

Parameters:
- width=300, height=200: Specific dimensions
- fit=cover: Crop to fill dimensions

Transformation 6: Silent Video (No Audio)

Remove audio track - reduces file size and perfect for autoplay

<source src="http://public-r2.vence.fun/cdn-cgi/media/mode=video,time=0s,duration=10s,audio=false/vids/time.mp4">

Parameters:
- audio=false: Remove audio track
- Smaller file size, ideal for autoplay

Transformation 7: Extract Audio Only

Extract just the audio as M4A file

<audio controls>
  <source src="http://public-r2.vence.fun/cdn-cgi/media/mode=audio,time=0s,duration=10s/vids/time.mp4" type="audio/mp4">
</audio>

Parameters:
- mode=audio: Extract audio as M4A
- time=0s, duration=10s: Clip length

Transformation 8: Mobile-Optimized (300px width)

Resize for mobile devices - smaller file, faster loading

<source src="http://public-r2.vence.fun/cdn-cgi/media/mode=video,time=0s,duration=10s,width=300,fit=scale-down/vids/time.mp4">

Parameters:
- width=300: Max width 300px
- fit=scale-down: Downscale only, don't upscale

Available Transformation Options

mode - video, frame, audio, spritesheet
time - Start time (0-10m, e.g., 5s, 2m)
duration - Output duration (1s-60s)
width/height - Dimensions (10-2000px)
fit - contain, scale-down, cover
audio - true (default), false
format - jpg, png (for frames); m4a (for audio)
filename - Custom filename for downloads

Source Requirements

Input video must be less than 100MB
Maximum input duration: 10 minutes
Recommended format: MP4 with H.264 video & AAC audio
Origin must support HTTP HEAD and Range requests

✨ Benefits:

Zero Infrastructure: No encoding servers, storage management, or CDN configuration
Automatic Caching: Transformed videos cached globally on Cloudflare's network
URL-Based: No API calls or SDK required - just use a URL
Cost Effective: Pay per unique transformation, not per view

🖼️ Use Case 5: Dynamic Thumbnail Generation

Best for: Video previews, poster images, animated GIFs

Static Thumbnails (Different Timestamps)

time=1s

time=3s

time=5s

<img src="https://customer-grc8061j89j7i9ew.cloudflarestream.com/889e6355765e5aebddaf195ef6ecb2b2/thumbnails/thumbnail.jpg?time=3s&height=200">

Animated GIF Thumbnail

thumbnail.gif?time=1s&duration=3s&height=200

<img src="https://customer-grc8061j89j7i9ew.cloudflarestream.com/889e6355765e5aebddaf195ef6ecb2b2/thumbnails/thumbnail.gif?time=1s&duration=3s&height=200">

Thumbnail Parameters

time - Timestamp (e.g., 5s, 1m30s)
height - Height in pixels
width - Width in pixels
fit - crop, clip, scale, fill
duration - For GIFs only (e.g., 3s)
fps - For GIFs only (default: 8)

🔒 Use Case 6: Signed URLs for Private Content

Best for: Paid content, authenticated users, geo-restrictions

Restrict video access using signed URLs. Perfect for:

Subscription-based content
Time-limited access (24-hour rental)
Geographic restrictions
IP-based access control

How It Works

Enable "Require Signed URLs" on your video
Generate a signed token via API or with a signing key
Replace video UID with the token in player/manifest URLs

// 1. Enable signed URLs on video
curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account}/stream/{video_uid}" \
  -H "Authorization: Bearer {token}" \
  -d '{"uid": "{video_uid}", "requireSignedURLs": true}'

// 2. Generate token (expires in 1 hour by default)
curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account}/stream/{video_uid}/token" \
  -H "Authorization: Bearer {token}"

// 3. Use token in player
<iframe src="https://customer-grc8061j89j7i9ew.cloudflarestream.com/{TOKEN}/iframe"></iframe>

Access Control Options

Expiration: Set token expiry (max 24 hours)
Geo-blocking: Allow/block by country code
IP restrictions: Whitelist specific IP ranges
Downloadable: Control MP4 download access

// Advanced: Generate token with restrictions
curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account}/stream/{video_uid}/token" \
  -H "Authorization: Bearer {token}" \
  -d '{
    "exp": 1640000000,
    "downloadable": true,
    "accessRules": [
      {"type": "ip.geoip.country", "action": "allow", "country": ["US", "GB"]},
      {"type": "any", "action": "block"}
    ]
  }'

📡 Use Case 7: Live Streaming

Best for: Events, webinars, real-time broadcasts

How Live Streaming Works

Create a Live Input via API or dashboard
Get RTMPS or SRT URL and Stream Key
Broadcast from OBS, Wirecast, or FFmpeg
Viewers watch via Stream Player or HLS/DASH
Recording automatically saved after stream ends (ready in 60 seconds)

// Create live input
curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account}/stream/live_inputs" \
  -H "Authorization: Bearer {token}" \
  -d '{"meta": {"name": "My Live Stream"}, "recording": {"mode": "automatic"}}'

// Response includes:
{
  "uid": "abc123...",
  "rtmps": {
    "url": "rtmps://live.cloudflare.com:443/live/",
    "streamKey": "MTQ0N..."
  }
}

// Configure in OBS/streaming software:
Server: rtmps://live.cloudflare.com:443/live/
Stream Key: MTQ0N...

Live Streaming Features

✓ RTMPS & SRT protocols
✓ Automatic recording
✓ Adaptive bitrate (ABR)
✓ Low-latency HLS (beta)
✓ Same pricing as on-demand

✓ Recording ready in 60 seconds
✓ Automatic reconnection
✓ Live instant clipping
✓ Global edge delivery
✓ Simulcast to multiple destinations

Cloudflare Stream: Complete Video Platform Guide

⚠️ Important Disclaimer

📊 What is Cloudflare Stream?

🎬 Use Case 1: Stream Player (iframe Embed)

Basic Player

Player with Custom Controls

Autoplay (muted)

Loop & Preload

Custom Primary Color & Start Time

Available Player Options

Pros & Cons

📱 Use Case 2: Direct MP4 Download for Product Pages

MP4 Download URL

Native HTML5 Video Player

Pros & Cons

🎥 Use Case 3: Custom Player with HLS/DASH

HLS Manifest URL

DASH Manifest URL

Custom Player Example (HLS.js)

Pros & Cons

✂️ Use Case 4: Media Transformations (/cdn-cgi/media)

URL Format

Original Video

Transformation 1: Clip First 5 Seconds

Transformation 2: Clip Middle Section (5s-10s)

Transformation 3: Resize to Square (500x500)

Transformation 4: Extract Still Frame

Transformation 5: Resized Frame (300x200)

Transformation 6: Silent Video (No Audio)

Transformation 7: Extract Audio Only

Transformation 8: Mobile-Optimized (300px width)

Available Transformation Options

Source Requirements

🖼️ Use Case 5: Dynamic Thumbnail Generation

Static Thumbnails (Different Timestamps)

Animated GIF Thumbnail

Thumbnail Parameters

🔒 Use Case 6: Signed URLs for Private Content

How It Works

Access Control Options

📡 Use Case 7: Live Streaming

How Live Streaming Works

Live Streaming Features

📚 Additional Resources