EasyLottie
Конвертер видео в Lottie

Разместите ваш видео Lottie на веб-сайте.

Пример рабочего HTML, использующий реальный экспорт EasyLottie. Скачайте его, а затем замените анимацию на свою.

Скачать рабочий примерПреобразуйте исходный файл самостоятельно.

Экспортированная анимация, отображаемая здесь.

Этот плеер загружает экспортированные JSON и файлы изображений с lottie-web. Это последовательность растровых изображений, а не редактируемые векторные работы. Загрузите пример, а затем нажмите «Воспроизвести», чтобы изучить движение.

Первый кадр экспортированной анимации интерфейса

Пример интерфейса: 4 секунды. Отдельная демонстрация не содержит аналитики. Скачать исходный MP4 или скачать конвертер выход.

Сохраняйте изображения рядом с папкой JSON.

Распакуйте стартовый файл. Он уже содержит плеер и примерные кадры. Запустите команду ниже из этой папки, а затем откройте. http://localhost:8000. Открытие HTML напрямую с использованием URL-адреса файла может блокировать запрос 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 для методов воспроизведения и управления жизненным циклом.

Замените образец своим экспортом

  1. Преобразуйте свой клип, выберите Lottie ZIP, и проверьте его предварительный просмотр перед скачиванием.
  2. Замените стартовый animations/ и images/ Папки с двумя папками из вашего экспорта. Сохраняйте связанные файлы вместе.
  3. Обновите соотношение сторон контейнера, чтобы оно соответствовало вашему выходу. assetsPath Исправьте, если вы перемещаете файлы.
  4. Протестируйте опубликованную страницу в браузерах вашей аудитории. В React, инициализируйте плеер при монтировании и вызывайте. destroy() в основном, очистка.

Если плеер пуст

JSON загружается, но изображения возвращают 404.
Проверьте папку с изображениями, регистр имени файла и наличие завершающей косой черты в assetsPath. Загрузка только main.json недостаточна для этого экспорта.
Работает локально, но перестает работать после публикации.
Проверьте панель «Сеть» в браузере. Убедитесь, что хост предоставляет JSON и WebP, а также что любые запросы между доменами разрешены.
Размер файла или объем памяти слишком велик.
Уменьшите продолжительность, размеры или частоту кадров. Lottie в растровом формате не гарантирует, что он будет меньше, чем видео или GIF. Сравните фактические размеры экспорта.

Метод: в этом примере используется тот же UI-источник и Lottie ZIP, опубликованный в нашем формате сравнения. Он демонстрирует веб-SVG рендерер; он не обеспечивает совместимость с iOS, Android или любым конструктором сайтов. Поддерживается EasyLottie, 9 сентября 2026.

Сравните реальные экспорт Lottie, GIF и WebM

Кнопка «Скачать», примеры загрузки и состояния успешного завершения →