制作ブログ Web制作開発ツール制作効率化動画からgifアニメーションを作成する→ffmpeg

動画からgifアニメーションを作成する→ffmpeg

【この記事の動作環境 Mac M1 / macOS 15.2】

ffmpeg、動画ファイルの扱いで困った際には、いろんなことができて頼りになる。
今回はその中から、動画ファイルをgifアニメーションにする

準備編

アプリケーションターミナルを起動する

1. homebrewがインストールされているか確認する

brew -v

バージョンが表示されればOK。バージョンが表示されず、「zsh: command not found」のような場合は、homebrewをインストールする。
brew(homebrew)をインストールする

2. ffmpegがインストールされているか確認する

ffmpeg
brew install ffmpeg

バージョン情報やら色々な情報が表示されればOK(ここでは、ffmpeg version 7.1 )。バージョンが表示されず、「zsh: command not found」のような場合は、ffmpegをインストールする。ちなみに、ネットワーク環境にもよるが、インストール完了までは結構時間がかかる。

「%」が表示されて、再度「ffmpeg」でバージョンが表示されていることを確認する(ここでは、ffmpeg version 7.1)。

TIPS 動画ファイルをgifアニメーションにする前に、fpsを把握する

まず最初に、動画ファイルのfpsが不明の場合は、下記を実行して、fps情報を把握する。

ffmpeg -i 動画ファイルパス/動画ファイル名

動画ファイルのたくさんの情報が取得されるが、最初の方の Video: の情報の中に、fps の値を確認できる。gifアニメーションを作る際は、どの程度「パラパラ」感を演出したいかで、この値は重要となる。
fps は frame per second、つまり一秒間に表示する画像枚数のこと。この値が小さいほど、パラパラ感は強調される。最大値はfpsの値と同様となり、動画と同様の見え方になる。

また、fps値の割り切れる数を設定するのがポイント。例えば、fpsが30の場合は、1, 2, 3, 5, 6, 10, 15, 30 のいずれかを指定する。

それでは、本題「動画からgifアニメーションを作成する」をやっていく。

動画ファイルをgifアニメーションにする

ffmpeg -i 動画ファイルパス/動画ファイル名 -vf "fps=5" gifを出力したいファイルパス/gifを出力したいファイル名

これだけ。
この例では、1秒間に5フレームのgifアニメーションとなる。
また、-vf (video filter)には、fps以外にも設定できる。

ffmpeg -i 動画ファイルパス/動画ファイル名 -vf "fps=5,scale=750:-1:flags=lanczos" gifを出力したいファイルパス/gifを出力したいファイル名

fps=5,scale=750:-1:flags=lanczos
これは、5fpsにする処理に加え、gifアニメーションのサイズを横幅750px、縦は -1 を指定することで元動画の比率を保持する。サイズに「:flags=lanczos」を付与することで、高画質で書き出す、という意味になる。

さらに、gifアニメーションの繰り返したい場合は、-loop をセットして回数を指定、無限ループしたい場合は「0」をセットする。

ffmpeg -i 動画ファイルパス/動画ファイル名 -vf "fps=10,scale=750:-1:flags=lanczos" -loop 0 gifを出力したいファイルパス/gifを出力したいファイル名

-vf(video filter) で設定できる内容

fps 1秒あたりのフレーム数を設定する
scale 750:-1 幅を750px、高さを自動(-1)で書き出しする
:flags= スケーリングのオプション
  • lanczos(高品質でシャープなリサイズ)
  • bilinear(高速処理、ただし画質は低め))
  • bicubic(高画質で、高速処理)
  • neighbor(ピクセルアートやレトロゲーム風画)
  • spline(高画質で自然な見た目)
  • area(解像度を縮小する)
  • gauss(特定のノイズ除去やスムージング)
  • hanning(信号処理や音声データなどの特定用途)
  • kaiser(特定の科学技術計算や信号処理)
  • mitchell(高品質な画像リサイズ)
crop 320:240:10:10 クロップ。320:240 切り抜き後の幅と高さ
10:10 切り抜き開始位置(左上の x, y 座標)
rotate PI/2 回転。PI/2 90度回転(ラジアン単位)
hue 色相、彩度、明度
h=90:s=0.7:b=1.2 色相を90度回転、彩度を70%に減少、明度を20%増加
s=0.5 彩度を半分に下げる(色味を抑える)
h=180 色相を180度回転して、反対の色にします
b=1.5 明るさを50%増加
setpts 0.5*PTS 再生速度を2倍に加速

これら以外にも、gifに特化したオプションがいろいろ用意されているが、ここでは割愛する。

それ以外の設定

動画の長さ指定 -t 5 動画の先頭5秒だけを処理
開始位置指定 -ss 00:00:10 動画の10秒目から開始
フレームレートの調整
(-vf fps と似た効果)
-r 10 出力のフレームレートを10fps に設定

たとえば、動画ファイル名が、input.mov、出力先のGifアニメーションが output.gif の場合

10秒目から3秒間をGifアニメーションにする場合(高速版)

入力動画の前に、-ss 10 を記述すると、高速スキップとなる(ただし、正確性がやや劣る)。

ffmpeg -ss 10 -i input.mov -t 3 -vf "fps=15,scale=750:-1:flags=lanczos" -loop 0 output.gif

10秒目から3秒間をGifアニメーションにする場合(精密版)

入力動画の後に、-ss 10 を記述すると、精密な開始位置となる(ただし、時間がかかる)。

ffmpeg -i input.mov -ss 10 -t 3 -vf "fps=15,scale=750:-1:flags=lanczos" -loop 0 output.gif

10秒目から3秒間をGifアニメーションにする場合(精密版)

ffmpeg -i input.mp4 -vf "trim=start=2.5:end=5.5,setpts=PTS-STARTPTS" output.mp4

setpts=PTS-STARTPTS は、トリム後のタイムスタンプをリセット(再生位置のずれを防ぐため)。動画全体をデコードするため、処理に時間がかかる。

精密通しの違いは、-vfで、hueなど色々フィルターをかける場合に有効。そうではない場合は、-ss を使用することで使い分けるとGood。