Cloudinary 動画ソリューションのすごいところをまとめてみた

そんなこともできるのか!!っていうCloudinaryの動画ソリューションです。
2021.01.25

Cloudinaryは、画像や動画、その他のデジタルアセットを管理、変換・最適化、そして配信まですべてできる SaaS です。本ブログでも特に画像変換に関する記事が多く紹介されていますが、今回はその Cloudinary の動画ソリューションについて、まとめていきます。

そもそも動画を使う理由

動画がマーケティングに活用すると効果的なことは明白ですが、2021年時点では86%ものビジネスにて動画が使われていて、2023年までにインターネット通信全体の82%を動画が占めることになるともいわれています。

動画のコンテンツはもちろん重要ですが、どのようなプレイヤーで、広告やその後のオススメ動画はどうするか、といった見せ方も、効果を引き出す上で大事になってきます。

動画の変換

即座に適用できる動画の変換

Cloudinaryでは、アセットのURLに変換パラメータを加えるだけで即座に変換を適用させることができます。Cloudinaryのドキュメントの例を見てみると、犬の顔全体が映ったオリジナルの動画に対し、そのURLへ幅、高さ、切り抜き方法をそれぞれ指定する3つのパラメータを加えることで新しい小さい動画を生成しています。

動画の変換

容量の大きい動画の場合は事前に生成しておけばさらに効率よく配信することができますが、この程度の動画は事前生成せずともその場ですぐ生成&再生でき、処理を待つ必要もありません。もちろん、変換してもオリジナルは保持されます。

かしこく最適化

Cloudinaryの画像最適化を知っている人には馴染み深いであろう、f_autoq_auto が動画にも適用させることができます!

動画のフォーマットにはそれに合ったコーデック(圧縮技術)があり、対応するブラウザやプレイヤーも考慮する必要があります。Cloudinaryでは、フォーマットパラメータ(f_)であらゆる形式へ動画を変換させられるだけでなく、f_auto を使えば、視聴ブラウザ/デバイスでサポートされて、かつ圧縮率が最適な動画形式・コーデックを自動的に判定して、変換・配信してくれます。

主な動画形式とサポートされるブラウザ (2021年1月時点)

形式 コーデック ブラウザ
MP4 H264 Chrome, Edge, Firefox, Opera, Safari
MP4 H265 Edge, Safari
WebM VP9 Chrome, Edge, Firefox, Opera

例えば、先ほどの犬の動画にf_autoを加えて再生した場合、MP4で338,262byteのオリジナルがそれぞれ異なる形式に変換され、いずれもサイズが小さくなります。

ブラウザ 形式/コーデック サイズ
Chrome WebM/VP9 299,372
Safari MP4/HVC1(HEVC,H.265) 280,333
FireFox MP4/AVC1(H.264) 312,436

また、品質パラメータ q_auto は、視覚的なエクスペリエンスを変えることなく動画を最適に圧縮してくれます。

これらのパラメータや圧縮は、変換デモページから試すことができます!手元にちょうどいい動画がない場合でも、サンプルをクリックするか、以下のようなパブリックの動画URLをコピーして、アップロード時に指定することもできます。

  • 素敵なサイトの素敵な動画を見つけたら、右クリックからURLをコピー

  • デモページで UPLOAD YOUR VIDEO をクリックし、Web Address にURLを貼り付けて確定

※2,3分を超えるような長い動画だと、処理に少し時間がかかる場合があります。

◆ ドキュメント: Video optimization

AI による対象物を追いかけるクロッピング

先ほど犬の動画を小さいサイズに変換して中央で切り抜いていましたが、動画の場合にはフレーム内で対象物が動く可能性があり、固定で切り抜いては大事な部分がフレームアウトしてしまいます。Cloudinaryの自動切り抜きパラメータ(g_auto)を使えば、被写体を検知して、フレームにおさまるよう自動的に良い感じに切り抜いてくれます。

デモページから実際の例を見ることができ、こちらもお手元の動画をアップしてその性能を確認することもできます!

他にも様々なベンリ変換

  • so_0,du_5: 最初の5秒のみ抽出
  • ac_none: 音声除去
  • e_preview: 数秒の要約プレビューを作ってくれる (サンプル集Cloudinaryブログ
  • l_ パラメータで簡単にウォーターマーク
  • 複雑な組み合わせの変換パラメータに名前を付けて、簡単に使い回すことができる Named Transformation
  • SNS 等でよく見る進捗バーを付けられる e_progressbar
  • グリーンスクリーン等を使って、奇をてらった合成ができる e_make_transparentCloudinaryブログ

合成、進捗バー、ウォーターマークなど詰め込んでみた動画がこちらです。(オリジナルはこちら

動画の管理

Cloudinary のストレージは S3 をベースにしていますが、コンソールはフォルダ階層やプレビューなど一般的なファイルエクスプローラのような使用感です。DAM機能を使えば、チーム内外での編集や共有がさらに簡単になります。

[レポート] アセットの作成から管理、編集、配信まで – Cloudinary DAM ワークショップ #ImageCon2020

自動タグ付け、字幕生成、モデレーション

動画に関するところでは、AIによる自動タグ付け、字幕の自動生成ができます。それらの結果には精度スコアも含まれるため、これに基づいて設定するかどうか決めることもできます。

上の動画で 0.4 以上のスコアでタグ付けするよう実行したところ、以下のような結果になりました。(結果にはスコア 0.39 で付与されなかった "tennis" もありました!)

デモページからはどちらも試すことができます。音声の文字起こしから字幕をつけるまで試した様子は、弊社ブログでも紹介しています。

Cloudinaryを使って動画に字幕をつけてみた

 

また、特にユーザアップロードのコンテンツに対して適用するのに便利な、アダルトコンテンツではないかチェックするモデレーションのアドオンもあります!画像版で試した例がこちらです。

モデレーションワークフローを組み込んだCloudinaryで、めそ子の写真集を作ってみた

動画の配信

もちろん画像と同様に変換URLを使って簡単に配信することができますが、数分におよぶ長い動画であれば、ABR 1が組み込まれた Cloudinary のプレイヤーを活用することをオススメします!

動画サイトを埋め込むこととの違い

Youtube などの動画サイトを使うのとは違い、Cloudinary のプレイやーを使えば以下のような点を自分で管理することができます。

  • プレイヤーの動作、デザイン(コンテンツに都合の良いコントローラにしたり、ブランディングに合わせた色合いに!)
  • プレイリストやオススメ動画(関係ある自社の動画だけオススメにリストさせられる!)
  • 広告
  • ユーザ操作の分析(どこで止めた、どこで音声を変更したか etc)
  • モデレーション(勝手にアダルト判定されて使用できなくなるなどのリスクはない!)

また、外部ドメインに飛ぶのではなく、同じドメインを使用できるため、ハンドシェイキング通信的にもベターです。

これらもデモページから機能のほどを確認することができます!

 

以上、少しばかり盛り沢山でしたが、Cloudinaryの動画ソリューションの一部始終をお見せしました。


クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。


  1. ABR(アダプティブビットレートストリーミング)とは、視聴環境(デバイスや回線速度など)に合わせて、動画を最適な品質で再生するための技術。YouTubeなど見ていて急に映像が粗くなったりしたら、それは回線が遅いなどの理由でABRにより行われている。