将您的视频 Lottie 放在网站上
一个工作中的 HTML 示例，使用实际的 EasyLottie 导出。下载后，请替换成您自己的动画。
导出的动画，在此运行。
这个播放器加载导出的 JSON 和图像文件，使用 lottie-web。这是一个栅格图像序列，而不是可编辑的矢量艺术。加载示例，然后按下“播放”以检查动画效果。
请保留与 JSON 文件夹旁边的图像。
解压 starter 文件夹。它已经包含了播放器和示例帧。 在该文件夹中运行下面的命令，然后打开。 http://localhost:8000直接使用文件 URL 打开 HTML 可能会阻塞 JSON 请求。
python3 -m http.server 8000您也可以使用任何静态 HTTP 服务器来提供该文件夹。 发布后，这些动画文件将对访问者开放。
video-lottie/
index.html
vendor/
lottie.min.js
LICENSE-lottie-web.md
animations/
main.json
images/
frame_000.webp
frame_001.webp
…核心播放器配置
path 加载动画 JSON。 assetsPath 指向提取的图像，并以斜杠结尾。 这种明确设置避免在内部搜索图像。 animations/images/.
<div id="animation" style="width:100%;max-width:480px;aspect-ratio:16/9"></div>
<script src="./vendor/lottie.min.js"></script>
<script>
const animation = lottie.loadAnimation({
container: document.getElementById('animation'),
renderer: 'svg',
loop: true,
autoplay: false,
path: './animations/main.json',
assetsPath: './images/'
});
// Call animation.play() from a Play button.
// Call animation.destroy() when removing this component.
</script>可下载的示例使用 lottie-web 5.13.0，并包含其 MIT 许可。请查看… lottie-web 官方文档 用于播放方法和生命周期控制。
将示例替换为您的导出。
- 将您的片段转换，选择 Lottie ZIP，并在下载前检查预览。
- 替换启动设置
animations/和images/将包含两个来自你的导出文件的文件夹。保持相关文件在一起。 - 更新容器的纵横比，以匹配您的输出。
assetsPath如果移动了文件，请检查。 - 在您的目标受众的浏览器中测试发布的页面。 在 React 中，在挂载时初始化播放器，并调用。
destroy()实际清理。
如果播放器为空
- JSON 加载，但图像返回 404.
- 检查图像文件夹、文件名大小写以及 assetsPath 中的尾部斜杠。仅上传 main.json 无法完成此导出。
- 本地运行，发布后出现问题。
- 检查浏览器的“网络”面板。确认浏览器端提供 JSON 和 WebP，并确保任何跨域请求被允许。
- 文件大小或内存使用量过高
- 减少时长、尺寸或帧率。 栅格 Lottie 不保证比视频或 GIF 更小。 比较实际的导出大小。
方法：此示例使用与我们在格式比较中发布的相同 UI 来源和 Lottie ZIP 文件。它展示了 Web SVG 渲染器；不涉及与 iOS、Android 或任何网站构建工具的本地兼容性。 由 EasyLottie 维护，2026 年 9 月 9 日。
比较真实的 Lottie、GIF 和 WebM 导出