Skip to content

Commit 4f7d837

Browse files
tsmith512hyperlint-ai[bot]dcpena
authored and
RebeccaTamachiro
committed
[Stream] Video Transformations beta docs (SHIP-9869 / #20532)
* [Stream] Documentation edits * Update src/content/docs/stream/transform-videos/index.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * [Stream] Tweaks * Placeholder changelog demo * URL fixes * Line spacing and small edits --------- Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> Co-authored-by: Denise Peña <[email protected]>
1 parent 0b2cb7c commit 4f7d837

File tree

2 files changed

+180
-0
lines changed

2 files changed

+180
-0
lines changed

‎src/content/changelog/stream/2025-03-06-media-transformations.mdx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: Introducing Media Transformations from Cloudflare Stream
3+
description: >
4+
Dynamically optimize, clip, and resize video from any origin, no storage
5+
migration needed.
6+
date: 2025-03-06T12:00:00Z
7+
---
8+
9+
Today, we are thrilled to announce Media Transformations, a new service that
10+
brings the magic of [Image Transformations](/images/transform-images/) to
11+
_short-form video files,_ wherever they are stored!
12+
13+
For customers with a huge volume of short video — generative AI output,
14+
e-commerce product videos, social media clips, or short marketing content —
15+
uploading those assets to Stream is not always practical. Sometimes, the
16+
greatest friction to getting started was the thought of all that migrating.
17+
Customers want a simpler solution that retains their current storage strategy to
18+
deliver small, optimized MP4 files. Now you can do that with Media
19+
Transformations.
20+
21+
To transform a video or image,
22+
[enable transformations](/stream/transform-videos/#getting-started) for your
23+
zone, then make a simple request with a specially formatted URL. The result is
24+
an MP4 that can be used in an HTML video element without a player library.
25+
If your zone already has Image Transformations enabled, then it is ready to
26+
optimize videos with Media Transformations, too.
27+
28+
``` text title="URL format"
29+
https://example.com/cdn-cgi/media/<OPTIONS>/<SOURCE-VIDEO>
30+
```
31+
32+
For example, we have a short video of the mobile in Austin's office. The
33+
original is nearly 30 megabytes and wider than necessary for this layout.
34+
Consider a simple width adjustment:
35+
36+
<video controls>
37+
<source src="https://developers.cloudflare.com/cdn-cgi/media/width=640/https://pub-d9fcbc1abcd244c1821f38b99017347f.r2.dev/aus-mobile.mp4" />
38+
</video>
39+
40+
``` text title="Example URL"
41+
https://example.com/cdn-cgi/media/width=640/<SOURCE-VIDEO>
42+
https://developers.cloudflare.com/cdn-cgi/media/width=640/https://pub-d9fcbc1abcd244c1821f38b99017347f.r2.dev/aus-mobile.mp4
43+
```
44+
45+
The result is less than 3 megabytes, properly sized, and delivered dynamically
46+
so that customers do not have to manage the creation and storage of these
47+
transformed assets.
48+
49+
For more information, learn about [Transforming Videos](/stream/transform-videos/).

‎src/content/docs/stream/transform-videos/index.mdx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
pcx_content_type: concept
3+
title: Transform videos
4+
sidebar:
5+
order: 5
6+
7+
---
8+
9+
Media Transformations let you optimize and manipulate videos stored _outside_ of the Cloudflare Stream. Transformed videos and images are served from one of your zones on Cloudflare.
10+
11+
To transform a video or image, you must [enable transformations](/stream/transform-videos/#getting-started) for your zone. If your zone already has Image Transformations enabled, you can also optimize videos with Media Transformations.
12+
13+
## Getting started
14+
15+
You can dynamically optimize and generate still images from videos that are stored _outside_ of Cloudflare Stream with Media Transformations.
16+
17+
Cloudflare will automatically cache every transformed video or image on our global network so that you store only the original image at your origin.
18+
19+
To enable transformations on your zone:
20+
21+
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
22+
2. Go to **Stream** > **Transformations**.
23+
3. Locate the specific zone where you want to enable transformations.
24+
4. Select **Enable** for zone.
25+
26+
## Transform a video by URL
27+
28+
You can convert and resize videos by requesting them via a specially-formatted URL, without writing any code. The URL format is:
29+
30+
```
31+
https://example.com/media/<OPTIONS>/<SOURCE-VIDEO>
32+
```
33+
34+
- `example.com`: Your website or zone on Cloudflare, with Transformations enabled.
35+
- `/cdn-cgi/media/`: A prefix that identifies a special path handled by Cloudflare's built-in media transformation service.
36+
- `<OPTIONS>`: A comma-separated list of options. Refer to the available options below.
37+
- `<SOURCE-VIDEO>`: An absolute path on the origin server or a full URL (starting with `https://` or `http://`) of the original asset to resize.
38+
39+
For example, this URL will source an HD video from an R2 bucket, shorten it, crop and resize it as a square, and remove the audio.
40+
41+
```
42+
https://example.com/media/mode=video,time=5s,duration=5s,width=500,height=500,fit=crop,audio=false/https://pub-8613b7f94d6146408add8fefb52c52e8.r2.dev/aus-mobile-demo.mp4
43+
```
44+
45+
The result is an MP4 that can be used in an HTML video element without a player library.
46+
47+
## Options
48+
49+
### `mode`
50+
51+
Specifies the kind of output to generate.
52+
53+
- `video`: Outputs an H.264/AAC optimized MP4 file.
54+
- `frame`: Outputs a still image.
55+
- `spritesheet`: Outputs a JPEG with multiple frames.
56+
57+
### `time`
58+
59+
Specifies when to start extracting the output in the input file. Depends on `mode`:
60+
61+
- When `mode` is `spritesheet` or `video`, specifies the timestamp where the output will start.
62+
- When `mode` is `frame`, specifies the timestamp from which to extract the still image.
63+
- Formats as a time string, for example: 5s, 2m
64+
- Acceptable range: 0 – 30s
65+
- Default: 0
66+
67+
### `duration`
68+
69+
The duration of the output video or spritesheet. Depends on `mode`:
70+
71+
- When `mode` is `video`, specifies the duration of the output.
72+
- When `mode` is `spritesheet`, specifies the time range from which to select frames.
73+
74+
### `fit`
75+
76+
In combination with `width` and `height`, specifies how to resize and crop the output. If the output is resized, it will always resize proportionally so content is not stretched.
77+
78+
- `contain`: Respecting aspect ratio, scales a video up or down to be entirely contained within output dimensions.
79+
- `scale-down`: Same as contain, but downscales to fit only. Do not upscale.
80+
- `cover`: Respecting aspect ratio, scales a video up or down to entirely cover the output dimensions, with a center-weighted crop of the remainder.
81+
82+
### `height`
83+
84+
Specifies maximum height of the output in pixels. Exact behavior depends on `fit`.
85+
86+
- Acceptable range: 10-2000 pixels
87+
88+
### `width`
89+
90+
Specifies the maximum width of the image in pixels. Exact behavior depends on `fit`.
91+
92+
- Acceptable range: 10-2000 pixels
93+
94+
### `audio`
95+
96+
When `mode` is `video`, specifies whether or not to include the source audio in the output.
97+
98+
- `true`: Includes source audio.
99+
- `false`: Output will be silent.
100+
- Default: `true`
101+
102+
### `format`
103+
104+
If `mode` is `frame`, specifies the image output format.
105+
106+
- Acceptable options: `jpg`, `png`
107+
108+
## Source video requirements
109+
110+
Input video must be less than 40MB. Contact Stream if the input limitation is unacceptable.
111+
112+
Input video should be an MP4 with H.264 encoded video and AAC or MP3 encoded audio. Other formats may work but are untested.
113+
114+
## Limitations
115+
116+
Media Transformations are currently in beta. During this period:
117+
118+
- Transformations are available for all enabled zones free-of-charge.
119+
- Restricting allowed origins for transformations are coming soon.
120+
- Outputs from Media Transformations will be cached, but if they must be regenerated, the origin fetch is not cached and may result in subsequent requests to the origin asset.
121+
122+
## Pricing
123+
124+
Media Transformations will be free for all customers while in beta.
125+
126+
After that, Media Transforamtions and Image Transformations will use the same subscriptions and usage metrics.
127+
128+
- Generating a still frame (single image) from a video counts as 1 transformation.
129+
- Generating an optimized video counts as 1 transformation _per second of the output_ video.
130+
- Each unique transformation is only billed once per month.
131+
- All Media and Image Transformations cost $0.50 per 1,000 monthly unique transformation operations, with a free monthly allocation of 5,000.

0 commit comments

Comments
 (0)