この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
画像、動画といったデジタルメディア管理、変換サービスのCloudinaryで動画配信を試す機会がありました。
本エントリでは簡単な動画変換を試してみたのでまとめてみます。
Cloudinaryとは
Cloudinary（クラウディナリ）は、イメージ最適化、配信、およびデジタルアセットマネージメントのリーディングソリューションです。
画像のような静的コンテンツだけでなく、動画の管理・ストリーム配信にも対応しています。
動画配信の流れ
動画をCloudinaryに一旦アップロードすれば、配信時に動画の URL をゴニョゴニョするだけで、動画の変換・配信作業は完結します。
対応動画・音声フォーマット
2019/03/07 時点では以下のフォーマットに対応しています。
参考 Video Transformations | Cloudinary
動画フォーマット対応状況
| 形式 | 拡張子 | アップロード対応 | 配信対応 |
|---|---|---|---|
| 3G2 | 3g2 | Yes | |
| 3GP ( 3rd Generation Partnership) | 3gp | Yes | |
| AVI (Audio Video Interleave) | avi | Yes | |
| FLV (Flash Video) | flv | Yes | Yes |
| HLS adaptive streaming | m3u8 | Yes | |
| M2TS (MPEG-2 Transport Stream) | m2ts | Yes | |
| MOV | mov | Yes | Yes |
| MKV (Matroska Multimedia Container) | mkv | Yes | |
| MP4 | mp4 | Yes | Yes |
| MPEG-2 | mpeg | Yes | |
| MPEG-DASH adaptive streaming | mpd | Yes | |
| OGV (Ogg Video) | ogv | Yes | Yes |
| WebM | webm | Yes | Yes |
| WMV (Windows Media Video) | wmv | Yes |
音声フォーマット対応状況
| 形式 | 拡張子 | アップロード対応 | 配信対応 |
|---|---|---|---|
| AAC(Advanced Audio Coding) | aac | Yes | Yes |
| AIFF (Audio Interchange File Format) | aiff | Yes | Yes |
| AMR (Adaptive Multi-Rate) | amr | Yes | |
| FLAC (Free Lossless Audio Codec) | flac | Yes | |
| M4A | m4a | Yes | Yes |
| MP3 (MPEG-#) | mp3 | Yes | Yes |
| OGG | ogg | Yes | Yes |
| WAV (Waveform Audio File Format) | wav | Yes | Yes |
動画をアップロードする
Cloudiary 管理コンソールのメニューから Media Library → Upload と選択し、動画をアップロードします。
動画アップロード完了後、アップロード動画のクリップのアイコンから URL を取得してください。
このURL は次の形式をしています。
https://res.cloudinary.com/[Cloudinary cloud name]/video/upload/[cloud name固有の文字列]/[FOLDER-NAME]/ファイル名.mp4
このURLに直接アクセスし、動画再生できることを確認してください。
ファイルの拡張子を変更するだけで、そのフォーマットに変換して配信されます。
以降では、この URL のパス部分を変更して、動画変換を試します。
https://res.cloudinary.com/[Cloudinary cloud name]/video/upload/[ランダム文字列]/[動画変換用パス]/[cloud name固有の文字列]/[FOLDER-NAME]/ファイル名.mp4
動画を HTML に埋め込む
HTML 内で動画を再生したい場合、次のような video タグを利用すれば OK です。
<video controls>
<source src="https://res.cloudinary.com/path/to/movie.webm" type="video/webm"/>
<source src="https://res.cloudinary.com/path/to/movie.mp4" type="video/wmp4"/>
<source src="https://res.cloudinary.com/path/to/movie.ogv" type="video/ogg"/>
Your browser does not support HTML5 video tags
</video>プレイヤーを利用したい場合は、次のドキュメントを参照ください。
How to Embed the Cloudinary Video Player in your Site or App | Cloudinary
リサイズ
リサイズする場合、縦横それぞれ h_, w_パラメーターを使います。
例 https://res.cloudinary.com/CLOUDINARY-CLOUD-NAME/video/upload/XXX/w_150,h_100/v1122334455/video.mp4
- w_100 のように数字で指定すれば、指定したピクセルのサイズになります。
- w_0.5 のように小数で指定すれば、本のサイズのスカラー倍のサイズになります。(0.5なら半分)
- h_/w_ の片方だけを指定した場合、もとのアスペクト比を維持したまま、もう片方のサイズが決定されます。
画質を落とす
画質を変更する場合 q_パラメーターを使います。
例 https://res.cloudinary.com/CLOUDINARY-CLOUD-NAME/video/upload/XXX/q_50/v1122334455/video.mp4
よしなに画質を操作する場合は q_auto を指定し、明示的に指定する場合は 1(最低)から100(最高)の間の数字を指定します。
mp4 形式に対して
- q_10
- q_50
- q_100
でファイルサイズを比較したのが、次のグラフです。
フェードイン・アウト
画像と同じく、動画にも様々なイフェクトを施す事が可能です。
動画をフェードイン・アウトさせる場合 e_fade:パラメーターを使います。
例 https://res.cloudinary.com/CLOUDINARY-CLOUD-NAME/video/upload/XXX/c_scale,e_fade:2000,q_10,w_600/e_fade:-5000/v1122334455/video.webm
- フェードする期間はミリ秒で指定します
- フェードインは正の整数で指定します
- フェードアウトは負の整数で指定します
最後に
イメージ最適化、配信、およびデジタルアセットマネージメントの SaaS であるCloudinaryについて、簡単な動画変換についてまとめてみました。
画像変換と動画変換は操作性が同じ為、片方を触ったことがある方は、もう片方のイメージもつかみやすいかと思います。
動画変換の機能詳細については次のページを参考にしていただければと思います。
Video Transformations | Cloudinary
お知らせ
3月14日(木)にCloudinary の社員をゲストに迎えて「AKIBA.AWS #12 Cloudinaryで画像や動画配信を最適化しよう」を開催します。 Cloudinary の導入やデジタル・アセット管理を検討されておられる方は、是非、お申し込み下さい。
【3/14（木） 東京】AKIBA.AWS #12 Cloudinaryで画像や動画配信を最適化しよう〜デイリーポータルZの検証事例も〜を開催します