動画を圧縮・リサイズしページ表示を高速化！新機能「Media Transformations」効果検証

今年、CloudflareからMedia Transformationsという新機能が発表されました。
「Media Transformations」は、ウェブサイトに掲載する動画をリアルタイムで変換・最適化し、動画の軽量化や表示速度の高速化する機能です。

Dynamically optimize, clip, and resize video from any origin with Media Transformations
https://blog.cloudflare.com/media-transformations-for-video-open-beta/

このMedia Transformationsが正式にリリースされたことがアナウンスされました。

Media Transformationsは、これまで画像を最適化していた「Image Transformations」の動画版であり、動画の圧縮やリサイズを自動で行います。
これにより、ECサイトの商品紹介動画や企業のプロモーション動画など、ウェブサイト上のあらゆる動画コンテンツの品質を維持したまま、ファイルサイズを大幅に削減することが可能です。

また、動画のファイルサイズを劇的に小さくすることで、快適に動画を視聴でき、離脱率の低下やユーザーエクスペリエンスの向上につながります。
ウェブサイトの表示速度を大幅に改善するためSEOの向上にも貢献します。

Media Transformationsの概要

Media Transformationsの基本的な仕組みはImage Transformationsと同様で、URLベースでリアルタイムに動画を変換・最適化できる点が最大の特徴です。

従来、一般的な動画最適化では、ファイルをアプリを使って変換してからサーバーにアップロードする必要がありましたが、Media TransformationsではCloudflareで変換処理を実行します。

CloudflareのCDNエッジで以下のような流れで処理されます
①元動画の取得：ウェブサーバ、R2、S3など既存ストレージから元ファイルを取得
②Cloudflareのエッジサーバー上で指定したパラメータに基づいて変換
③最適化・変換済みファイルをキャッシュし、エンドユーザーに配信

実行方法

まず、左側のメニューから「Stream」を選択し、「Transformations」ページに移動します。
Media Transformationsを有効にしたいゾーン（ドメイン）の横にある「Enable（有効化）」をクリックします。

これで準備は完了です。

変換はURLのパラメータで指定します。

例）
https://www.domore.co.jp/cdn-cgi/media/mode=video,fit=contain/https://www.domore.co.jp/xxxxxxxx.mp4

サンプルパターン①

変換前のファイル（元画像）

変換後のファイル（パラメータ付き）

ファイルサイズは、5.1Mから1.7Mへサイズダウン。

サンプルパターン②

変換前のファイル（元画像）

変換後のファイル（パラメータ付き）

ファイルサイズは、37.3Mから5.1Mへサイズダウン。

使用上の制限

・拡張子が .mp4 で、かつ中身が H.264 + AAC or MP3 の動画のみ可能（アニメーションgifは不可）。
・変換対象のファイルサイズは40MBまで
・動画の出力の長さは1分まで

詳しい仕様は公式をご覧ください。
https://developers.cloudflare.com/stream/transform-videos/

ご興味がありましたらドーモまでご連絡ください。