Marp CLI 中 GIF 在演示者模式下的播放问题解析

问题现象

在使用 Marp CLI 进行演示时，当开启演示者模式（presenter view）时，GIF 动画会出现一个特殊现象：在预览下一张幻灯片时，GIF 就已经开始播放；而当真正切换到该幻灯片时，GIF 不会从头开始播放，而是继续从预览时的播放位置继续播放。

技术背景

Marp CLI 是基于 Web 技术构建的幻灯片工具，其演示者模式是通过浏览器渲染实现的。在 Web 环境中，GIF 动画的播放行为由浏览器控制，开发者无法直接干预 GIF 的播放状态。当同一 GIF 同时在主视图和预览视图中显示时，浏览器会共享同一个 GIF 实例，导致播放状态同步。

解决方案分析

虽然 Marp 核心团队认为这不是框架需要解决的问题（标记为 wontfix），但开发者可以通过客户端 JavaScript 实现 GIF 的重新加载来达到预期效果。具体实现思路是：

1. 监听幻灯片切换事件
2. 检测当前活动幻灯片中的 GIF 元素
3. 通过修改 GIF 的 URL 参数强制浏览器重新加载

实现代码示例

以下是一个可行的解决方案，可以放在演示文稿的最后一页：

let lastSlide = null;

setInterval(() => {
  const currentSlide = document.querySelector('.bespoke-marp-slide.bespoke-marp-active');
  if (!currentSlide || currentSlide === lastSlide) return;
  lastSlide = currentSlide;

  const gifs = currentSlide.querySelectorAll('img[src*=".gif"]');
  gifs.forEach(gif => {
    const base = gif.src.split('?')[0];
    const newSrc = `${base}?reload=${Date.now()}`;
    const img = new Image();
    img.onload = () => {
      gif.src = newSrc;
    };
    img.src = newSrc;
  });
}, 300);

技术考量

1. 性能影响：此方案会绕过浏览器缓存，每次切换幻灯片都会重新请求 GIF 文件，可能增加网络负载
2. 兼容性：适用于所有支持 JavaScript 的现代浏览器
3. 实现复杂度：相对简单，不需要修改 Marp 核心代码

最佳实践建议

1. 对于关键动画，考虑转换为视频格式（如 MP4），可以获得更好的控制性
2. 如果必须使用 GIF，可以将此脚本放在演示文稿的最后一页，避免影响其他幻灯片的加载
3. 调整轮询间隔（300ms）可根据实际性能需求进行优化

总结

Marp CLI 作为基于 Web 的幻灯片工具，其 GIF 播放行为受限于浏览器实现。虽然框架本身不提供直接解决方案，但通过客户端 JavaScript 可以实现 GIF 的强制重新加载，解决演示者模式下的播放同步问题。开发者应根据实际需求权衡解决方案的性能影响和实现效果。