差分

このページの2つのバージョン間の差分を表示します。

--- html_css:replace_gifs_with_videos [2021/02/25 16:22] – [参考文献] ともやん
+++ html_css:replace_gifs_with_videos [2023/03/09 13:35] – [ビデオ解像度] ともやん
@@ 行 1: / 行 1: @@
+~~CLOSETOC~~
 ====== アニメーションGIFをビデオに置き換えてページの読み込みを高速化する ======
-Windowsの場合は [[windows:scoop|scoop]] で [[windows:ffmpeg|ffmpeg]] をインストールできますが、scoop 標準の ffmpeg では VP9 エンコード出来ないようです。(2012/02/25 現在) ffmpeg.json を編集して VP9 対応の ffmpeg をインストールする必要があります。\\
-===== 解像度 =====
+===== ビデオ解像度 =====
-p: 7680×4320 8K\\
+<html>
-p: 3840x2160 4K (YouTube)\\
+  <style>
-p: 2560x1440 (YouTube)\\
+    #mintbl th {
-p: 1920x1080 (YouTube)\\
+      white-space: nowrap;
-p: 1280x720 (YouTube)\\
+    }
-p: 854x480 (YouTube)\\
+  </style>
-p: 640x360 (YouTube)\\
+</html>
-p: 426x240 (YouTube)\\
+<WRAP mintbl_mid>
-p: 256×144 (YouTube)\\
+^  ビデオ解像度  ^^^^  名称 (正式名称)  ^  備考  ^
+^  画像アスペクト比\\ 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:common_video_resolutions_2.svg?340|Common_Video_Resolutions_2.svg}}{{html_css:vector_video_standards5.svg?340|Vector_Video_Standards5.svg}}\\
+{{html_css:vector_video_standards5.svg?600|Vector_Video_Standards5.svg}}\\
-[[https://commons.wikimedia.org/wiki/File:Common_Video_Resolutions_2.svg|File:Common_Video_Resolutions_2.svg - Wikimedia Commons]]\\
 [[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>
 ===== 参考文献 =====
@@ 行 23: / 行 67: @@
 [[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]]\\