MarkDown处理媒体
写MarkDown的时候难免会有很多使用图片和视频的地方,分享下我的处理方式。
1.概述
媒体分类:静态图、动态图、视频
存储:云端对象存储
2.媒体格式
图片格式可以参考这位大神的移动端图片格式调研.
2.1.静态图
常见的jpg、png等比较大,像webp、heic、avif等都是比较优秀的格式。
webp,已经全平台支持了,推荐
。
heic,各个浏览器都不支持(截止2021-11-12),不能用。
avif,在chrome已经支持,基于chromium的或多或少在支持中,可根据你的实际情况使用。
2.2.动态图
目前常见格式是gif、webp、avif。
gif,体积较大,且清晰度低。
webp,动态图在清晰度和压缩率上都有不错的支持,推荐
。
avif,在chrome已经全面适配,而safari和移动端浏览器的支持还较差,基本不建议使用。
2.3.视频
首先应统一为mp4封装,至于编码格式,可以考虑h264、h265、vp8、vp9、av1。
h264的普适性最好,基本已经全平台支持。
vp8、vp9、av1在chrome平台支持性非常好,但是由于硬件的发展,av1相关的硬件编码器尚不普及,转换需要消耗较多的资源。
目前主要还是推荐h264、h265.
但是,如果作为你的个人blog,我建议还是不要放视频,最好直接将视频转为动图,优势如下:
- 信息密度高,利于阅读,对扬声器无依赖
- 体积小
- 转码快
可以通过ffmpeg转换
1 | # h265编码 |
3.存储
七牛(http://www.qiniu.com/) 或者阿里云、腾讯云的对象存储,稳定性和便利度都很高。
也都提供了大量的api方便脚本话使用。
可以参考我自己用的脚本:https://github.com/ccbuildpro/markdown_oss
4.媒体处理
4.1图片压缩
4.2.视频转换为动图
通过各种屏幕录制工具录制MP4,然后通过Gif Brewery将MP4转制为Gif,再压缩。
这里需要注意,使用Gif Brewery转为为Gif的时候,各种参数均需要设置为最高,这样可以保证ImageMagick判断重复帧,最大化提高压缩比。
4.3.视频转码
1 | ffmpeg -i ./VID_20210515_120714.mp4 -c:a copy -c:v libx265 -crf 33 ./output-h265-7.mp4 |
ffmpeg可以直接通过brew安装
1 | brew install ffmpeg |