如何在hexo里面实现类似动态播放视频

发表于 更新于 阅读次数：

​ 昨天访问了游戏人生 | 铭心石刻这个大佬的博客，对于他的这个动态图很心动，于是想自己实现一个，如果能循环播放一个视频，那么效果应该还是很不错的。

​ 本来想将本地视频导入到网上，但试了一下，好像并没有成功，视频并未显示，而且也做不到，循环播放。

​ 所以我就想和本地图片传网上一样，我将mp4文件转成gif，但又出现了一个问题，就是视频转gif后，他占用内存很大，所以传不上去，但思来想去我也不知道怎么办了，所以我就去按照这个想法弄了一下。虽然很麻烦，但是至少也还是成功了，记录一下，以后有好方法了再更改。

​ 效果是这样子的（因为我参考了游戏人生 | 铭心石刻的博客教程，我也采取的这样的长条横栏，所以以下是针对我的博客页面设计的两张合适的图片）

蜘蛛侠下落

开小车车

大致上追求免费你可能需要这些：

==过程好复杂的嘞==[^咋这么多软件要用啊]

​ 其实一个软件可以实现好几个操作，但是我怕忘了（感觉都挺好用），所以每个都只干一件事，方便我记软件。以后可以选择着用。

1. [Adobe Express](https://new.express.adobe.com/tools/convert-to-gif?referrer=https%3A%2F%2Fwww.bing.com%2F&url=%2Fcn%2Fexpress%2Ffeature%2Fvideo%2Fconvert%2Fvideo-to-gif&placement=ax-columns-1&locale=zh-CN&contentRegion=cn&ecid=91875909407633769592947036031743569670&%24web_only=true&_branch_match_id=1433410478227127019&_branch_referrer=H4sIAAAAAAAAAzVPy2rDMBD8mugmPyLbqgKilJCQUw%2B59VRkeW2LyFohyXHaQ7%2B9CqWwDLPLDjMzp%2BTjoSzVgD1Er8LNY0x0g75Q3hfWuFsJJf84XcF%2BXdpL%2FxpghBAgyPkp3bG33f6cZ9u2ojduKjQueSUaXQKXrjAZdFI7AtoMUtQvvBWVaCreMcY70Yq9aHjFuorVvGFtJzpeEW%2BVhiXLpXpQjXZdXKQ1saiVBfk90%2BM7WYOV2Ui7DPDwAWLMbASV1gCZ3c0A%2BHxAd4eQ%2Fi80IZ3MSH7%2BeuTEn33ALeZCp2GCX8YlYr8QAQAA)^免费^：将视频转成gif的软件
2.  [GIF 压缩器](https://imageresizer.com/zh/%E5%8E%8B%E7%BC%A9gif)^免费^：压缩gif大小
3.  [imagestool](https://imagestool.com/zh_CN/gif-crop)^免费^：根据你的需求裁剪gif图片大小
4.  [Postimages ](https://postimages.org/)^免费^还挺好用（反正我的picgo天天报错）
5.  Picgo^免费^建议搭配Typora[^不是免费的]一起（图床有关的知识建议查阅这篇文章）
6.  [123APPS](https://online-video-cutter.com/cn/)^免费^裁视频，当然你也可以先裁

实际操作：

  1. 通过Adobe Express将MP4等视频文件转成gif
  2. 然后使用 GIF 压缩器压缩gif大小
  3. 有需要再用imagestool裁剪自己想要的尺寸，但是裁剪后内存会变大（原理可以看下面的叙述）
  4. 再次使用 GIF 压缩器压缩gif大小,记得注意内存（因为Postimages 最多只能传34MB的图片，Picgo我不知道能传多少）
  5. 最后把处理好的文件（小于34）文件放到Postimages 处理就好了(这一步还可以用Picgo+Typora（89来着我记得）实现)
  6. 然后就可以复制链接使用了

为什么视频转gif内存会变大

视频转成 GIF 后内存变大的原因，主要可以归结为以下几点：

🧠 1. GIF 格式压缩效率低

GIF 使用的是 无损压缩，主要是 LZW（Lempel–Ziv–Welch）算法，压缩率远低于视频常用的压缩格式（如 H.264、H.265）。

  • 视频文件（如 MP4）使用有损压缩，能极大压缩体积。
  • GIF 文件保留每一帧的完整像素信息，空间占用大。

🎞️ 2. 帧率 & 分辨率未降低

如果你在转换时没有降低：

  • 帧率（比如 30fps 转成 10fps）
  • 分辨率（比如 1920x1080 降到 480x270）

那么 GIF 会包含大量帧，而且每帧都是一张完整的图像，占用巨大空间。

🎨 3. GIF 颜色限制

GIF 只支持 最多 256 色，这意味着：

  • 颜色要被量化，无法表示视频中复杂的色彩变化。
  • 若颜色变化大，GIF 体积反而可能更大（因为无法用简化颜色表达差异，反而要增加更多图像信息）。

📦 4. 无音频，但体积仍大

虽然 GIF 不包含音频（视频里通常也有音频部分），但由于帧数和无损压缩的原因，体积通常不会比视频小。

🛠️ 解决方法(查阅了Chat gpt,给出的方法)

如果你想减小 GIF 文件的体积，可以尝试：

  • 降低分辨率（例如 1080p → 480p）
  • 降低帧率（例如 30fps → 10fps）
  • 缩短时长（剪辑你需要的部分）
  • 使用工具如 FFmpeg、ezgif.com、Gifski，可以设置优化参数
  • 或者考虑导出成 WebP 动图，体积更小、支持更多颜色，还可以透明

​ MP4是一种数字多媒体容器格式，用于存储视频和音频文件，以及字幕和静态图像。它是互联网上广泛使用的一种视频格式，也是数码相机、移动设备和其他便携式媒体播放器的格式。MP4文件使用有损和无损压缩的组合，以一种有效的方式存储视频和音频数据。视频数据通常使用H.264或H.265编解码器存储，它以高压缩效率和良好的视频质量著称。音频数据通常使用AAC编解码器存储，它以较低的比特率提供良好的音频质量。

​ MP4格式是分享高质量视频的最好选择。然而，在保留视频质量和保持低文件大小方面，MP4算法并不尽如人意。如果你的视频要放在网站上，这可能会对你的页面加载速度产生负面影响。为了避免这个问题，在将你的视频放在网站上之前，将MP4转换为WebP!这将保持文件大小较小，页面加载时间快，视频质量基本相同。

​ 但是我试了一下webp没法自动播放啊，我再研究研究。（最主要确实我那个方法操作起来费时间）

​