【速報】Cloudflareが動画変換サービスを開始！Media Transformationsで何が変わる？

2025年3月にCloudflareから新しいサービス「Media Transformations」が発表されました。
画像変換サービス（Transform Images）は今までもあったのですが、今回動画ファイルの変換サービスがリリースされたとのことでどのようなことができるのか検証を行ってみました。

Cloudflare doc：https://developers.cloudflare.com/stream/transform-videos/
Cloudflare公式blog：https://blog.cloudflare.com/media-transformations-for-video-open-beta/

※2025年4月段階ではbeta版の機能になります

Media Transformationsの動作概要

　・Cloudflareの外部に保存されているビデオから静止画像を動的に最適化して生成できます。
　・変換されたビデオまたは画像を自動的にキャッシュしてCloudflareから配信できます。

動画の変換は手間と時間のかかる作業になりますが、Cloudflare側で処理してくれるためシステム運用が非常に楽になるでしょう。

また、外部の動画を呼び出して変換を行いますので、既存の環境から動画ファイルを移動させなくて良いのも一つの利点です。

Cloudflareにログインすると［stream］の中に［Transformations］という項目が新しく追加されてます。

Media Transformationsの有効化

有効化はドメインごとに行う必要があります。
Media Transformationsを有効にしたいドメインに対して有効にします。


これでMedia Transformationsが使えるようになりました。

環境の準備

構成

今回はR2からMP4形式の動画ファイルを配信する構成とします。


ですので、まずは下記のようにR2から動画を配信できる環境を用意します。

R2バケット環境の用意

下記コマンドでR2バケットを作成して確認をします。

$ npx wrangler r2 bucket create movie-r2-bucket
$ npx wrangler r2 bucket list
...
name:       movie-r2-bucket
creation_date:  2025-04-19T09:23:49.783Z
...

mp4の動画ファイルを用意して、R2バケットにアップロードします。
今回はdouga.mp4というMP4の動画を用意してアップロードしました。

$ npx wrangler r2 object put movie-r2-bucket/douga.mp4 --file ./douga.mp4 --remote

※注意点
Media Transformationsにはファイルサイズが40MB未満である必要があるという制限があります。
その他にも何点か制限がありますので下記ドキュメントをご確認ください。
　Cloudflare doc；https://developers.cloudflare.com/stream/transform-videos/#source-video-requirements

R2バケットの中を確認するとMP4ファイルが置かれてます。


今回は検証ですので、R2のr2.devサブドメインを使用していきます。
下記コマンドで設定を変更していきます。
※r2.devサブドメインはパブリックに公開が可能ですがレート制限などが存在します。本番環境での利用は推奨されてません。

$ npx wrangler r2 bucket dev-url enable movie-r2-bucket

Are you sure you enable public access for bucket 'movie-r2-bucket'? The contents of your bucket will be made publicly available at its r2.dev URL … yes
Enabling public access for bucket 'movie-r2-bucket'...
Public access enabled at 'https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev'.

$ npx wrangler r2 bucket dev-url get movie-r2-bucket
Public access is enabled at 'https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev'.

上記が設定できましたらブラウザから動画が見れるか確認します。
r2.devのURLでアクセスしますのでxxxxxxxxxxxxxxxxxxxxxxxxxxxの箇所は、環境に合わせて変更をしてください。

https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4

私の用意した動画ですと、ブラウザの開発者ツールで確認すると約19MBとなっていました。

動画の変換の指定について

変換方法について

特にコードは不要でURLの指定だけで動画の変換が可能です。
オプション指定の詳細については下記のCloudflareのドキュメントに記載がありますので参照ください。

Cloudflare doc：https://developers.cloudflare.com/stream/transform-videos/#transform-a-video-by-url
Cloudflare doc：https://developers.cloudflare.com/stream/transform-videos/#options

動画変換URLフォーマット

https://{Cloudflareのドメイン}/cdn-cgi/media/<OPTIONS>/<SOURCE-VIDEO>

Cloudflare imagesを使用したことがある方なら上記で気付いたかもしれませんが、Cloudflare imagesで使用する指定方法と同様の指定方法です。

OPTIONSについて簡単にまとめると下記が指定可能です。

動作確認

DNS登録

この機能はCloudflare経由でのみ利用可能であるため、検証用FQDNをCloudflare DNSに追加します。
今回はtest-media-transformというサブドメインを作成してますが、なんでも構いません。

動画の動作チェック

まずは下記のようにシンプルなオプション指定でブラウザから確認してみました。

https://test-media-transform.xxxxxxx.xxx/cdn-cgi/media/mode=video,fit=contain/https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4

元のファイルサイズは約19MBでしたが、3.7MBになりました。

再生自体は特に問題なく再生できました。
何も指定してないので元の動画と比べると若干プレイヤーのサイズが小さくなりましたが、オプションで下記のようにサイズ指定をすれば問題なかったです。

https://test-media-transform.xxxxxxx.xxx/cdn-cgi/media/mode=video,fit=contain,width=900/https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4

動画変換処理に要する時間

初回のアクセスは動画変換処理が発生するのでリクエストの返答に時間がかかりました。
動画のサイズや指定によって変わるはずですが、私の環境では約4秒ほど変換に時間がかかりました。

一度変換が出来てしまえば次のアクセスからはすぐ応答が返ってきます。

動画のトリミング

下記のようにオプションを指定することによって動画のトリミングをすることもできます。サイズを指定して縦長の動画に変換を行っています。

https://test-media-transform.xxxxxxx.xxx/cdn-cgi/media/mode=video,width=500,height=700,fit=cover/https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4

動画から画像を生成

動画から画像の生成もできます。サムネイルの生成などに活用ができそうです。

https://test-media-transform.xxxxxxx.xxx/cdn-cgi/media/mode=frame,fit=contain/https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4

ブラウザの開発者ツールからContent-typeを確認したところ、ちゃんとjpgになっていました。

次は画像にする動画のタイミングを3秒時点・画像幅の指定・画像フォーマットをpngにして画像を生成してみました。

https://test-media-transform.xxxxxxx.xxx/cdn-cgi/media/mode=frame,time=3s,width=320,fit=contain,format=png/https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4

ブラウザの開発者ツールからContent-typeを確認したところ、ちゃんとjpgではなくpngになっていました。

スプライトシートの生成

スプライトシートも生成できるのは面白いと思いました。

https://test-media-transform.xxxxxxx.xxx/cdn-cgi/media/mode=spritesheet,fit=contain/https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4

timeオプションを追加して(例：time=3s)、画像生成を開始する動画の時間の指定も可能です。
ただ、色々とオプションを変更してみたのですが
現状だとまだ縦に並べるスプライトシートしか生成ができなさそうでした。横に並べたり折り返して表示させたりなども今後出てきてくれると嬉しいです。

WEBページへの組み込み

動画ファイル一つと、簡単なhtmlとcssで下記のように表示ができます。

●/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>test media transformations</title>
  </head>
  <body>
    <h3>test media transformations</h3>
    <a href="play.html"><img src="https://test-media-transform.xxxxxxx.xxx/cdn-cgi/media/mode=frame,fit=contain,width=300/https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4"></a>
  </body>
</html>

●/play.html

<!DOCTYPE html>
<html>
  <head>
    <title>test media transformations</title>
      <style>
        .container {
          display: flex;
          align-items: flex-start;
          gap: 10px;
        }
        .container img {
          object-fit: cover;
        }
    </style>
  </head>
  <body>
    <div class="container">
    <img src="https://test-media-transform.xxxxxxx.xxx/cdn-cgi/media/mode=spritesheet,fit=cover,width=160,height=80/https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4" />
    <video controls autoplay muted>
      <source src="https://test-media-transform.xxxxxxx.xxx/cdn-cgi/media/mode=video,fit=contain/https://pub-xxxxxxxxxxxxxxxxxxxxxxxxxxx.r2.dev/douga.mp4" type="video/mp4" />
    </video>
    </div>
  </body>
</html>

ブラウザからindex.htmlにアクセスすると下記の画面になります。

画像をクリックすると、スプライトシートと動画が表示されます。

動画一つだけでこういった素材が利用できるようになります。
サイズは指定できるのでサイトによって自由にしていただければと思います。

簡単ではありますがMedia Transformationsの検証をさせて頂きました。

まだベータ版であり機能も少ないですが、動画サイズが想像以上に小さくなったことに驚きました。
エンコードなど手間と時間がかかるものをCloudflare側で対応してもらえるのは運用の負荷が下がるので良い機能だと思います。

動画の変換の指定方法がCloudflareのImagesと同じ形でしたのでImagesをすでに使われてる方は入りやすい機能になっています。
ただ、ドキュメントを探したのですが、まだWorkersと連携させるドキュメントがありませんでした。
Workersと連携できれば変換の指定はWorkersに任せられたり、他の色々な利用用途も増えるので待ち遠しいです。

そしてCloudflareなら上記以外でも、

　・パフォーマンスの向上
　・サイトの信頼性の向上
　・セキュリティの向上

が、一つのサービスで実現できますので非常におすすめです。

アクセリア自社CDNの開発と運用は、20年以上にわたります。それらの経験とノウハウを駆使したプロフェッショナルサポートをパッケージしたサービスが、［Solution CDN］です。
移行支援によるスムーズな導入とともに、お客様の運用負担を最小限に​とどめながら、WEBサイトのパフォーマンスとセキュリティを最大限に高めます。運用サポートはフルアウトソーシングからミニマムサポートまで、ご要望に合わせてご提供します。

Cloudflare（クラウドフレア）の導入や運用について、またそれ以外のことでもなにか気になることがございましたらお気軽にご相談下さい。