假设一个简单的产品演示，例如在http://www.sublimetext.com/ 上找到的那个
即这不是传统的高分辨率视频，可以通过以下方式合理完成：
问题是，哪个对用户表现更好？两者都在：
如果您认为有一项卓越的技术可以完成此或其他指标来判断其有用性，请告诉我，我会做出相应调整。
【问题讨论】：
标签： performance video html5-canvas html5-video animated-gif
我知道它已经回答了，但正如你特别提到的 Sublime Text 动画，我假设你想要创建类似的东西？
如果是这样的话，那么这里有一篇文章解释了它是如何由 Sublime Text 作者自己创建的：
这篇文章有趣的部分是他如何减小文件大小 - 我相信这是你的问题。
【讨论】：
对于一个简单的动画，如您所指的链接中的那个，帧速率非常低，动画 GIF 的简单动画 PNG 可能是最好的解决方案。
但是，您需要在此考虑带宽因素。如果 GIF 或 PNG 的最终尺寸很大，那么缓冲视频可能会更好。
这是因为在显示之前需要下载整个 gif/png 文件（但我不确定交错的 PNG 在包含动画时如何工作）。
视频的文件大小可能较大，但由于它通常是缓冲的，因此您几乎可以立即显示动画。
使用外部主机（例如 YouTube 或其他主机）可能对您的网站有益，并且带宽来自这些网站而不是来自您的服务器（如果您使用以各种方式对此进行限制或收费的提供商） )。
有关动画 PNG 或 APNG 的更多信息（因为这不太为人所知）：
https://en.wikipedia.org/wiki/APNG
这里的画布只是一个显示设备，并不是真正需要的（图像容器可以完成相同的工作，还可以为 GIF/PNG 制作动画，而画布不能）。
如果你使用很多向量，那么可以考虑画布。
CSS3 动画也是演示幻灯片之类的选项。
【讨论】：