大東 信仁（ものくろ） 
Reactで動画が作れる「Remotion」を使っていて、ちょっと困ったことがあったんですよね。
プレビュー（npm start）では完璧に見えていたのに、いざブラウザのレンダリングのボタンを押したり、 npx remotion render で書き出してみると、背景に使った動画素材がカクカクしたり、コマ落ちしたりするんです、めっちゃ残念、、。
「せっかく作ったのに！」って焦るんだけど、これ、Remotionのレンダリングの仕組みと、コードの書き方のミスマッチが原因だったんです。
今回は、この問題を解決する方法と、CursorやCopilotなどのAIに修正を依頼するときに、ミスなく一発で書き換えさせるためのプロンプトを紹介します。
なぜ動画素材がカクつくのか
Remotionって、書き出しを高速化するために、デフォルトで複数のフレームを同時に並行処理（マルチスレッドレンダリング）するんですよね。
でも、通常の <Video /> タグや <video> タグは、ブラウザの再生機能に依存しているらしく、、。
ブラウザは「リアルタイム再生」は得意なんだけど、「高負荷なレンダリング中に、並行して複数のフレームを正確にデコードする」のは苦手なんです。
その結果、処理が追いつかずフレームが飛んでしまう。
解決策：OffthreadVideoを使う
この問題を解決するために、Remotionは <OffthreadVideo /> という専用コンポーネントを用意してくれているそうです。（知らなかった）
これ、ブラウザの再生機能を使わず、レンダリング専用のスレッドで正確にフレームを抽出するから、どれだけ負荷がかかってもコマ落ちしないそうで。
「じゃあ、タグを書き換えればいいんだね！」
そう思いますよね。でも、ここに罠があるらしい。
ただタグを変えるだけでは動かない？「staticFileの罠」
<OffthreadVideo> って、少し特殊な仕様を持っていて、通常のReact開発のように import video from './assets/video.mp4' とインポートした変数をそのまま src に渡しても、うまく動かないことが多いんです。
NGな書き方（動かない可能性大）
import myVideo from './assets/bg.mp4'; // インポートした変数
// ...
<OffthreadVideo src={myVideo} />
OKな書き方（推奨）
import { staticFile } from 'remotion';
// ...
// publicフォルダ内のパスを文字列で指定する
<OffthreadVideo src={staticFile('bg.mp4')} />
つまり、タグの変更と同時に、動画ファイルの読み込み方も staticFile() 形式にリファクタリングする必要があるんですよね。
AIに一発で修正させる「完璧なプロンプト」
これを踏まえて、CursorやChatGPTにコード修正を依頼するとき、ただ「OffthreadVideoに変えて」と言うだけだと不十分なんです。90点の回答しか返ってこなくて、エラーになる可能性がある？のかな？という感じ。
以下のプロンプトを使えば、インポート周りも含めて100点の修正を一発でやってくれます。
おすすめプロンプト
このRemotionコード内の <Video /> または <video /> タグを、レンダリングに最適化された <OffthreadVideo /> にリファクタリングしてください。
【重要条件】
1. "remotion" から OffthreadVideo を import すること。
2. src 属性は import した変数ではなく、必ず staticFile() を使用して public フォルダ内のパスを指定する形式に修正すること。
英語で指示する場合（より精度を高めたい時）
Refactor all <Video /> and <video /> tags to use the <OffthreadVideo /> component from Remotion to prevent frame drops during rendering.
Please ensure:
1. Update imports to include OffthreadVideo.
2. Use staticFile() for the 'src' attribute instead of imported assets.
まとめ
色々と試して見つけた解決方法なんですが、ポイントは3つ。
書き出し時のカクつきは <OffthreadVideo /> で直る様子です。ただし、src の指定には staticFile() を使う必要があるらしく、そして、AIに指示するときは、タグの変更だけでなく「staticFileへの書き換え」もセットで指示するとミスがないようです。
これで、Remotionを使った動画制作がよりスムーズになるはず。ぜひ試してみてください。
