MP4からの卒業

まえがき

こんにちは。小話がある。png画像を数十枚読み込むサイトがあるんだけど、iPhoneだけスペックに難があるため描画が読み込み時に崩れまくったんだ。
macでも起きなくて、PC,SP時代において、macとiphoneで作りが違うという問題をよくAppleでは散見される。とはいえ、Appleのブランディングに飲まれた我が国家ではFirefoxのように捨てることができない。

ところがpngをwebpにしたことでものによって（割と）は90%容量を削減し、高速で表示ができるようになった。もちろん特例もあって、webpよりpngのが軽くなる現象もある。それはでも限られたケースだ。

そこで表題の件になる。WEBMの標準化だ。これはとても良いタイミングであり、ある程度リッチコンテンツの流れも変えることになる。

MP4 -> WEBM

では png -> webp でかなり容量を削減するのに対して、MP4 -> WEBM はどうかというと、
3分の1とか半分以下になる。50%-70%の削減。動画なので印象はがらりと変わる。

そもそもgifやapngなどはmp4にしたほうが軽量だ。それさえもまだ浸透自体はしていなかったりする。webpのアニメーションも軽くはない。

GoogleのYoutubeはALL WebMだとか。ところがSNS系ではまだ導入が遅く、mp4は当たり前でもwebmで出力なんて提供しているサービスもほぼ見ないのではないだろうか。movとかaviとかいろいろあって、ようやく収束しかけてんのに！って思う方もいるでしょう。実はいまからやると世界が変わる。日本全土の4G+勢国民は大歓喜がこれから訪れる。導入したフリしてる5Gなんてなくてよかったんや。

ffmpeg DE WebM

今回ざっくり

• mp4 -> webm
• 透過背景動画をやってみたいの
• 結合

あたりを試しました。結果は上々だが、やはり試さないと手順の構築はできないことがわかった。

mp4 -> webmと、透過背景動画をやってみたいの

そもそもですが、いきなりmp4をwebmにしながら透過背景を指定できます。

ffmpeg -i green_back_test01.mp4 -vf "chromakey=0x3b9a55:0.05:0.05" -c:v libvpx-vp9 -pix_fmt yuva420p green_back_test01.webm

クロマキー結合と言われている手法を取る
「0x3b9a55:0.05:0.05」の
3b9a55が透過表現するカラーコード
次の0.05が、green backの振れ幅。
最後の0.05が、透過の具合です。強すぎるとわずかな緑を大きく透過してしまいます。

なので、今回はちゃんとしたグリーンバックなので、カラーピッカーで緑の具合を取得して、ほぼ振れ幅ナシで繊細に透過表現してねというコマンドになります。
この値が大きいときは、どこに緑があるの？って場所も透過になってしまいました。

ブルーバックでも同様にできました。

結合

私が舐めていて感動したのは結合です。試しにグリーンバック透過動画と、ブルーバック透過動画を結合してみました。これが一瞬で終わります。

ffmpeg -f concat -safe 0 -i <(echo -e "file '/zettai/path/merge_back_test01_2.webm'\nfile '/zettai/path/green_back_test01.webm'") -c copy merge_last.webm

このコマンドはいろいろなファイル指定があるそうですが、ヒトが直観的にわかる書き方が上記です。
で、これ透過情報を保持したまま結合します。ヤバい。

あとがき

ここで透過動画にウォーターマーク（透かし）ではないですが、ロゴでも埋め込もうと思いました。
それはサクッと入ったんですが、どうこねくり回しても透過が解除されてしまいました。

もしかしたらできる方法があるかもしれませんが、これは手順として、透過前の動画に埋め込んでおく必要がありそうです。

ffmpeg -i merge_back_test01_2.webm -i logo.webp -filter_complex "overlay=W-w-10:H-h-10" -c:v libvpx-vp9 -pix_fmt yuva420p logo_test01.webm
ffmpeg -i merge_back_test01_2.webm -i logo.webp -filter_complex "[0][1]overlay=W-w-10:H-h-10:format=auto" -c:v libvpx-vp9 -pix_fmt yuva420p logo_test01.webm

どちらもロゴは設置できますが、透かし情報が解除されました。

あとがき2

透過動画については、iPhoneだけ透過にできません(笑)これがまえがきの話になります。macでできてるやん！なにしてんの！？という感じ。
まぁ動画のパフォーマンスがあがるので、これによりリッチな描画をWEBサイトで表現できるようになります。なのでみなさんそろそろWebM準備してね。

余談

透過WEBMの背景にpng画像を指定する。

この時背景画像を1.5倍のサイズにします。なぜかそうしないとピッタリしなかったんで。比率も当然一緒にします。あと、クロマキー合成は毎回指定しないと外れます。いろいろ試してffmpeg側が削ってしまうんと思います。そのうちバージョンアップで解消するかも？

ffmpeg -i 420x730px_MP4.webm -i 630x1095px_MP4.png -filter_complex "[0:v]chromakey=0x08443b:0.02:0.02[ckout];[1:v][ckout]overlay=0:0:format=auto" -c:v libvpx-vp9 -pix_fmt yuva420p 420x730px_combined.webm

透過WEBMの背景に背景mp4をいれて合成する

今回は、背景が8秒なので、それまで透過WEBMをリピートさせています。当然ここでもクロマキーを指定。

ffmpeg -stream_loop -1 -i 420x730px_MP4.webm -i 420x730px_MP4.mp4 -filter_complex "[0:v]chromakey=0x08443b:0.02:0.02[ckout];[1:v][ckout]overlay=0:0:format=auto" -t 8 -c:v libvpx-vp9 -pix_fmt yuva420p 420x730px_combined_looped.webm

スローにしたい。

試しに2倍のスローマーションにしました。

ffmpeg -i 420x730px_combined_looped.webm -filter:v "setpts=2*PTS" -c:v libvpx-vp9 -pix_fmt yuva420p 420x730px_combined_slowed.webm

8秒->16秒->3秒にカット

長いのでカット...

ffmpeg -i 420x730px_combined_slowed.webm -t 3 -c:v libvpx-vp9 -pix_fmt yuva420p 420x730px_combined_slowed_trimmed.webm

こんな感じで、たまにできない時は調整がいるものの、シンプルなことは迷わずできます。ね。

奥深きWebMの世界

「-c:v libvpx-vp9」これはv9というまぁ割と新しいコーデックなのですが、AV1という最新のコーデックがあり、これはさらに処理に時間がかかるかわりに高圧縮された軽量動画ファイルになる。Youtubeもv9からav1に徐々に変えているそうです。ただコンバートするのに2倍から10倍v9より時間を要すので、いくばくか未来の技術と言えます。サーバのスペック的に。

ちなみにモノによるでしょうが、小さい動画でテストしたところ、AV1の方が時間が10倍じゃ効かないくらいかかりましたが、v9より半分以下になりました...。