ヘッダー画像にGIF動画
動画はインパクトが有りますが、ヘッダーは通常は静止画は指定出来ますが、動画が指定出来ません。
唯一の解決策がGIFアニメーションですが、通常の作成方法ですと、MP4動画に比べて数十倍になることがあり、現実的には使えません。
GIF動画を使うにしても、短時間の動画となると思います。
ここでは、公開されているFree動画から、何とかヘッダーGIFを作ってみました。
DLしたMP4動画から、目的のヘッダーGIFを作成する手順を忘れない様に手順にしてみました。
- 動画の切り出し
- MP4動画を再圧縮
- 動画の特定の場所を切り出す
- 切り出した動画から連続静止画を出力する
- GIF動画にする前に、ループするので、何コマか巻き戻す画像を後ろに挿入
- ⇒これは無くてもOKですが、画像の繋がりをスムースにするため！
- 巻き戻しにする静止画は連続した番号にファイル名を振り直す
- 連続静止画からGIF動画を作成する
- 動画は1画面のサイズですが、ヘッダー画像用に表示部だけクリップします
- GIF編集アプリでコマの時間を調整する
以上で何とか目的のGIF動画を作成してみました。最初の作品ですのでブラシアップが必要ですが・・・
なお、ここで使った上記の処理は殆どがffmpegコマンドで実行しました。
＜ご参考まで＞
ffmpegコマンドでは動画ファイルの圧縮は簡単です・・・（上記の手順とは順序が違っています）
動画の有るフォルダーに移動後・・ # ffmpeg -i “圧縮したいファイル.mp4” -crf 32 出力ファイル名.mp4 上記の内、-crf の後の数値を大きくすると圧縮率が上がります。 $ ffmpeg -ss 10 -t 4 -i image1.mp4 image1.gif 上記の例は、元のmp4ファイル、image1.mp4を、開始10秒目から4秒間を切り出して、image1.gifファイルとして出力しています。 $ ffmpeg -i image1.mp4 -vf crop=1280:180:0:300 image1-c.gif 上記は、image1.mp4動画ファイルから、トリミングした、image1-c.gif動画を得る方法。上下全幅で高さ300pxをカット！ $ ffmpeg -ss 0 -t 4.3 -i image1-c.gif image1-c1.gif 同じgifファイルで、0秒から、4.3秒間を抜き出した、別名で保存する方法！ $ ffmpeg -i imqge1-c1.gif -vf pad=0:780:0:300:black ooutput.gif 元画像が、1280wx180hのgifファイルに、上下300pxの、黒い余白を設けて、別名のgif動画に出力するコマンド例 $ ffmpeg -i image1.mp4 -vf scale=1280:-1 imqge1-ss.mp4 解像度が1980w1080hのビデオをｗ1280wの解像度に落とすコマンド例 $ ffmpeg -i image%04d.jpg out.gif 連番の画像から動画GIGを作る場合は上記の例が参考になります！
なお、GIF画像の各コマ時間を設定出来るアプリを使う必要がありますが、ここではWindows用のglamと言う名のフリーソフトを使いました。
ここで使用する静止画は、毎秒何枚の静止画を出すか指定していますので、デフォルトでは表示が早すぎます。又、ループする時に巻き戻しは、複数枚で1枚の画像を表示していますので、これらのコマの表示時間を変更しないと、不自然になります。
その後の動画GIF作成のつぼ
- 動画の動きで方法を選択する必要がある
- 当サイトの花が風で揺らいでいるものは、ある程度で、そのまま折り返すとループでも繋が上手くゆく
- 滝の動画のような場合は上記の方法はNGです。スタートと同様画面で終わる
- スタートと同様の画面であれば、ループしても、この部分での動作の不自然さを無くせる
- 元の動画から駒数を数分の１位に間引く
- 動画を間引いて、間引いた分だけ一齣の表示時間を増やすとファイルサイズを小さく出来る。この場合、一齣づつの表示時間を、編集出来るアプリが必要です。
（GIF動画は無限ループする設定にする前提で考えています）