html_css:replace_gifs_with_videos [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

~~CLOSETOC~~
====== アニメーションGIFをビデオに置き換えてページの読み込みを高速化する ======
{{page>hardware:video_resolutions}}

===== ffmpeg のインストール =====
Windowsの場合は [[windows:scoop|scoop]] で [[windows:ffmpeg|ffmpeg]] をインストールできますが、[[windows:scoop|scoop]] 標準の [[windows:ffmpeg|ffmpeg]] では VP9 エンコード出来ないようです。(2021/02/25 現在) ffmpeg.json を編集して VP9 対応の ffmpeg をインストールする必要があります。\\

===== ffmpeg のオプション =====
<WRAP prewrap 100%>
MP4 - 1080p
<code>
$ ffmpeg -i input.mov -preset slow -codec:a libfdk_aac -b:a 128k -codec:v libx264 -pix_fmt yuv420p -b:v 4500k -minrate 4500k -maxrate 9000k -bufsize 9000k -vf scale=-1:1080 output.mp4
</code>

MP4 - 720p
<code>
$ ffmpeg -i input.mov -preset slow -codec:a libfdk_aac -b:a 128k -codec:v libx264 -pix_fmt yuv420p -b:v 2500k -minrate 1500k -maxrate 4000k -bufsize 5000k -vf scale=-1:720 output.mp4
</code>

MP4 - 480p
<code>
$ ffmpeg -i input.mov -preset slow -codec:a libfdk_aac -b:a 128k -codec:v libx264 -pix_fmt yuv420p -b:v 1000k -minrate 500k -maxrate 2000k -bufsize 2000k -vf scale=854:480 output.mp4
</code>

MP4 - 360p
<code>
$ ffmpeg -i input.mov -preset slow -codec:a libfdk_aac -b:a 128k -codec:v libx264 -pix_fmt yuv420p -b:v 750k -minrate 400k -maxrate 1000k -bufsize 1500k -vf scale=-1:360 output.mp4
</code>
</WRAP>

===== 参考文献 =====
[[https://web.dev/replace-gifs-with-videos/|Replace animated GIFs with video for faster page loads]]\\
[[https://support.google.com/youtube/answer/6375112|動画の解像度とアスペクト比 - パソコン - YouTube ヘルプ]]\\
[[wpjp>480p|480p - Wikipedia]]\\
[[wpjp>720p|720p - Wikipedia]]\\
[[https://osusumehulu.com/?p=1267|動画の画質と解像度「SD、HD、フルHD、4K UHD、8K、480p、720p、1080p、HDR、Dolby Vison」の意味と違い | 俺の動画。]]\\
[[https://gist.github.com/dvlden/b9d923cb31775f92fa54eb8c39ccd5a9|Convert video files to MP4 through FFMPEG]]\\
[[https://amaya382.hatenablog.jp/entry/2017/03/26/012530|MP4をストリームで扱う場合の落とし穴 - 水底]]\\
[[qita>CyberRex/items/960bbd0f348ad8dca544|FFmpegでよく使う例、コーデックをまとめてみた（2021年版） - Qiita]]\\