次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン |
html_css:replace_gifs_with_videos [2021/02/25 14:54] – 作成 ともやん | html_css:replace_gifs_with_videos [2023/03/09 13:35] – [ビデオ解像度] ともやん |
---|
| ~~CLOSETOC~~ |
====== アニメーションGIFをビデオに置き換えてページの読み込みを高速化する ====== | ====== アニメーションGIFをビデオに置き換えてページの読み込みを高速化する ====== |
Windowsの場合は [[windows:scoop|scoop]] で [[windows:ffmpeg|ffmpeg]] をインストールできますが、scoop 標準の ffmpeg では VP9 エンコード出来ないようです。(2012/02/25 現在) ffmpeg.json を編集して VP9 対応の ffmpeg をインストールする必要があります。\\ | |
| ===== ビデオ解像度 ===== |
| <html> |
| <style> |
| #mintbl th { |
| white-space: nowrap; |
| } |
| </style> |
| </html> |
| <WRAP mintbl_mid> |
| ^ ビデオ解像度 ^^^^ 名称 (正式名称) ^ 備考 ^ |
| ^ 画像アスペクト比\\ DAR: (Display Aspect Ratio) ^ 16:9 ^ 3:2 ^ 4:3 ^ ::: ^ ::: ^ |
| | 4320p | 7680×4320 | | | 8K, SHV, 8K Ultra HD (Super High-Vision) | YouTube 推奨 | |
| | 2160p | 3840x2160 | | | 4K, UHD, Ultra HD (Ultra High Definition) | ::: | |
| | 1440p | 2560x1440 | | | 2K, FHD, Full HD (Full High Definition) | ::: | |
| | 1080p | 1920x1080 | | | HD (High Definition Video) | ::: | |
| | 720p | 1280x720 | | | SD (Standard Definition Video) | ::: | |
| | 480p | 854x480 | 720×480 | 640x480 | 480p (YouTube) | ::: | |
| | 360p | 640x360 | | | 360p (YouTube) | ::: | |
| | 240p | 426x240 | | | 240p (YouTube) | ::: | |
| | 144p | 256×144 | | | 144p (YouTube) | ::: | |
| </WRAP> |
| |
| {{html_css:vector_video_standards5.svg?600|Vector_Video_Standards5.svg}}\\ |
| [[https://commons.wikimedia.org/wiki/File:Vector_Video_Standards5.svg|File:Vector Video Standards5.svg - Wikimedia Commons]] より\\ |
| |
| 参考: [[https://support.google.com/youtube/answer/6375112|動画の解像度とアスペクト比 - パソコン - YouTube ヘルプ (Google)]]\\ |
| [[wpjp>ピクセルアスペクト比|ピクセルアスペクト比 - Wikipedia]]\\ |
| |
| {{html_css:common_video_resolutions_2.svg?340|Common_Video_Resolutions_2.svg}}\\ [[https://commons.wikimedia.org/wiki/File:Common_Video_Resolutions_2.svg|File:Common_Video_Resolutions_2.svg - Wikimedia Commons]] より\\ |
| |
| 参考: [[https://gadget-initiative.com/glossary/display_resolution_aspect_ratio|https://gadget-initiative.com › glossary |
| 画面の解像度・アスペクト比まとめ | GADGET Initiative]]\\ |
| |
| ===== 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://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]]\\ |
| |