まさかの遠回り。地味に長引きました。YouTube Shorts用の動画をRemotionで作っているんですが、レンダリングした動画を見返していて「あれ、背景がカクついてない?」と気づきました。原因はすぐ分かるだろうと思って調べ始めたら、最初に立てた仮説が見事に外れて、しかも直そうとした結果もっとひどくなった、という遠回りをしたので記録しておきます。
まず疑ったのは、素材のフレームレートだった
まず構成の確認から。この動画は、Pexelsからダウンロードした実写素材を背景に敷いて、その上にテキストを重ねる作りにしています。カクついているのはその背景部分でした。
最初の仮説はこうです。真っ先に思い浮かんだのが「素材と動画本体のフレームレートが合っていないんじゃないか」という仮説です。実際に素材のfpsを調べてみると、この予想は当たっていました。
予想は的中でした。使っていた素材は24fps・23.976fps・25fpsとバラバラで、一方で作っている動画本体は30fpsでした。異なるフレームレートの映像を30fpsに乗せれば、フレームの割り当てにズレが出てカクついて見えるはずです。理屈としてはきれいに説明がつきます。
fpsを変換したら、もっとひどくなった
対策はffmpegでした。原因が分かった気になって、ffmpegで素材側を30fpsに変換することにしました。単純にコマ落ちさせるのではなく、中間フレームを補間して滑らかにするオプションを付けて実行し、変換後の素材で改めてレンダリングし直しました。
反応は正直でした。できあがった動画を確認してもらったら、返ってきた反応は「なんか余計にガタついてる」でした。
まさかの展開でした。これは完全に予想外でした。理屈の上では正しいはずの対処をして、結果が悪化しています。後から考えれば、原因ははっきりしていました。使った補間方法が、前後のフレームを単純に重ね合わせる方式だったからです。ゆっくりした動きの映像なら問題になりませんが、今回の素材にはターミナル画面が高速でスクロールする映像が含まれていました。動きの速い映像にこの処理をかけると、前後のフレームが二重写しになったような残像が出ます。滑らかにするつもりの処理が、逆にノイズを増やしていたわけです。
素材を戻して、ツール側を疑い直した
まずは原点に戻りました。変換した素材はバックアップから元に戻しました。ここで初めて「そもそも素材側が原因ではないのかもしれない」と考え直しました。
違和感は残りました。よく考えると、おかしな点がありました。フレームレートの不一致でカクつくのだとすれば、それは映像の変わり目に一定のリズムで現れるはずです。でも実際の見え方は、もっと不規則な引っかかり方をしていました。
疑いの矛先を変えました。そこで、素材を映しているRemotion側のコンポーネントを見直すことにしました。Claudeと相談しながら組んだコードでは、背景動画を表示するのに<Video>というコンポーネントを使っていました。
原因は、動画を表示するコンポーネントの選び方だった
原因はまさかの取得方式。調べてみると、Remotionには動画を埋め込むコンポーネントが2種類あることが分かりました。<Video>と<OffthreadVideo>です。
鍵は<Video>タグでした。公式ドキュメントによると、この2つは動画の取り出し方が根本的に違います。<Video>はブラウザのvideoタグをそのまま使う方式で、レンダリング時にはブラウザに対して1フレームずつ「この時刻の映像をください」と要求します。ところが、ブラウザのvideo要素は指定した時刻ぴったりのフレームを返すことを保証していません。Remotionが全フレームに対して高速に要求を出す負荷の下では、1つ前のフレームが返ってきたり、同じフレームが重複したりすることがあります。これがカクつきの正体でした。
対照的な仕組みでした。一方の<OffthreadVideo>は、レンダリング時にブラウザを経由しません。動画ファイルから直接、目的のフレームを取り出して画像として配置します。ブラウザのシーク精度に左右されないので、フレームが正確に揃います。
解決は一瞬でした。呆気なかったです。直し方は拍子抜けするくらい簡単で、importとタグ名を書き換えるだけでした。レンダリングし直したら、カクつきは解消されていました。
振り返って思ったこと
反省点は明確でした。素材ではなくツールでした。今回いちばん反省したのは、素材(データ)側ばかり疑って、ツール側を疑わなかったことです。
正しさと原因は別物でした。fpsの不一致という仮説は、それ自体は間違っていませんでした。実際に素材と動画本体のfpsは食い違っていたので、確かめた事実としては正しかったんです。ただ、それが「今見えている症状の原因」かどうかは別の話でした。事実として正しいことを見つけると、それが原因だと思い込みやすいのは、気をつけたいところだなと思います。
むしろ好都合でした。怪我の功名です。あと、今回は「直したつもりが悪化した」ことで、かえって早く軌道修正できた面もあります。もし変換後の見た目が「変わらない」程度だったら、たぶんもうしばらく素材側をいじり続けていました。悪化してくれたおかげで「この方向は違う」とはっきり分かった、という意味では運が良かったのかもしれません。
地味に効いています。ちなみにこの修正は、実写背景を使う全シーンで共通のコンポーネントに対して行ったので、今後作る動画にもそのまま効いてきます。地味ですが、こういう共通部分の修正は後からじわじわ効いてくるので、気づけてよかったです。
この記事が参考になったら、応援クリックをお願いします
