このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 次のリビジョン両方とも次のリビジョン |
html_css:replace_gifs_with_videos [2021/06/04 04:29] – [ビデオ解像度] ともやん | html_css:replace_gifs_with_videos [2022/01/31 01:09] – [ビデオ解像度] ともやん |
---|
| ~~CLOSETOC~~ |
====== アニメーションGIFをビデオに置き換えてページの読み込みを高速化する ====== | ====== アニメーションGIFをビデオに置き換えてページの読み込みを高速化する ====== |
Windowsの場合は [[windows:scoop|scoop]] で [[windows:ffmpeg|ffmpeg]] をインストールできますが、[[windows:scoop|scoop]] 標準の [[windows:ffmpeg|ffmpeg]] では VP9 エンコード出来ないようです。(2021/02/25 現在) ffmpeg.json を編集して VP9 対応の ffmpeg をインストールする必要があります。\\ | |
| |
===== ビデオ解像度 ===== | ===== ビデオ解像度 ===== |
[[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 |
[[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]]\\ |
| |