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，我建议还是不要放视频，最好直接将视频转为动图，优势如下：

  1. 信息密度高，利于阅读，对扬声器无依赖
  2. 体积小
  3. 转码快
    可以通过ffmpeg转换
1
2
3
4
5
# h265编码
ffmpeg -i ./VID_20210515_120714.mp4 -c:a copy -c:v libx265 -crf 33 ./output-h265-7.mp4
# av1编码
ffmpeg -i ./VID_20210515_120714.mp4 -c:a copy -c:v libaom-av1 -aom-params lossless=1 ./output-av1.mp4

3.存储

七牛(http://www.qiniu.com/) 或者阿里云、腾讯云的对象存储，稳定性和便利度都很高。
也都提供了大量的api方便脚本话使用。
可以参考我自己用的脚本：https://github.com/ccbuildpro/markdown_oss

4.媒体处理

4.1图片压缩

参考ImageMagick压缩图片

4.2.视频转换为动图

通过各种屏幕录制工具录制MP4，然后通过Gif Brewery将MP4转制为Gif，再压缩。
这里需要注意，使用Gif Brewery转为为Gif的时候，各种参数均需要设置为最高，这样可以保证ImageMagick判断重复帧，最大化提高压缩比。

4.3.视频转码

1
2
ffmpeg -i ./VID_20210515_120714.mp4 -c:a copy -c:v libx265 -crf 33 ./output-h265-7.mp4
ffmpeg -i ./VID_20210515_120714.mp4 -c:a copy -c:v libaom-av1 -aom-params lossless=1 ./output-av1.mp4

ffmpeg可以直接通过brew安装

1
brew install ffmpeg