html_css:replace_gifs_with_videos

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
最新のリビジョン両方とも次のリビジョン
html_css:replace_gifs_with_videos [2021/05/31 15:16] ともやんhtml_css:replace_gifs_with_videos [2023/03/09 13:35] – [ビデオ解像度] ともやん
行 1: 行 1:
 +~~CLOSETOC~~
 ====== アニメーションGIFをビデオに置き換えてページの読み込みを高速化する ====== ====== アニメーションGIFをビデオに置き換えてページの読み込みを高速化する ======
-Windowsの場合は [[windows:scoop|scoop]] で [[windows:ffmpeg|ffmpeg]] をインストールできますが、scoop 標準の ffmpeg では VP9 エンコード出来ないようです。(2012/02/25 現在) ffmpeg.json を編集して VP9 対応の ffmpeg をインストールする必要があります。\\ 
  
 ===== ビデオ解像度 ===== ===== ビデオ解像度 =====
-^  ビデオ解像度  ^^^  名称 (正式名称)  ^  備考 +<html> 
-^ 画像アスペクト比\\ (Display Aspect Ratio:DAR)  ^  16:9  ^  3:2  ^  4:3  ^  +  <style> 
-|4320p  |  7680×4320 || 8K, SHV, 8K Ultra HD (Super High-Vision)  |  | +    #mintbl th { 
-|2160p  |  3840x2160 || 4K, UHD, Ultra HD (Ultra High Definition) YouTube 推奨  +      white-space: nowrap; 
-|1440p  |  2560x1440 || 2K, FHD, Full HD (Full High Definition)  | :::  | +    } 
-|1080p  |  1920x1080 || HD (High Definition Video)  | :::  +  </style> 
-| 720p  |  1280x720 || SD (Standard Definition Video)  | :::  +</html> 
-| 480p  |  854x480 |  720×480| 640x480  | 480p (YouTube)  | :::  +<WRAP mintbl_mid> 
-| 360p  |  640x360 || 360p (YouTube)  | :::  +^  ビデオ解像度  ^^^^  名称 (正式名称)  ^  備考 
-| 240p  |  426x240 || 240p (YouTube)  | :::  + 画像アスペクト比\\ DAR: (Display Aspect Ratio)  ^  16:9  ^  3:2  ^  4:3  ^ ::: ^ ::: 
-| 144p  |  256×144 || 144p (YouTube)  | :::  |+ 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}}\\ {{html_css:vector_video_standards5.svg?600|Vector_Video_Standards5.svg}}\\
行 21: 行 30:
  [[wpjp>ピクセルアスペクト比|ピクセルアスペクト比 - Wikipedia]]\\  [[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]] より\\+{{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 オプション =====+===== ffmpeg オプション =====
 <WRAP prewrap 100%> <WRAP prewrap 100%>
 MP4 - 1080p MP4 - 1080p
行 55: 行 69:
 [[https://gist.github.com/dvlden/b9d923cb31775f92fa54eb8c39ccd5a9|Convert video files to MP4 through FFMPEG]]\\ [[https://gist.github.com/dvlden/b9d923cb31775f92fa54eb8c39ccd5a9|Convert video files to MP4 through FFMPEG]]\\
 [[https://amaya382.hatenablog.jp/entry/2017/03/26/012530|MP4をストリームで扱う場合の落とし穴 - 水底]]\\ [[https://amaya382.hatenablog.jp/entry/2017/03/26/012530|MP4をストリームで扱う場合の落とし穴 - 水底]]\\
 +[[qita>CyberRex/items/960bbd0f348ad8dca544|FFmpegでよく使う例、コーデックをまとめてみた(2021年版) - Qiita]]\\
  
  • html_css/replace_gifs_with_videos.txt
  • 最終更新: 2024/04/09 15:49
  • by ともやん