Конвертировать gif в HTML5 — можно ли автоматически?

Question

[Ness_me]

Стоит задача преобразовать файл из gif либо видео из формата mp4 в html5 для отображения на сайте. Цель - минимизировать вес анимации.
Существуют ли способы сделать это с помощью какого-либо конвертера или единственный возможный вариант - найти человека, который сможет сделать анимации сразу в html5?

Comments

[Виталий Першин]

А что хоть за анимация? mp4 порой меньше весит чем gif...

[Ness_me]

Виталий, нужен размер на порядок меньше. т.е. исходный креатив прим. 1 Мб, а целевой размер до 100 Кб. Так что просто mp4 не подойдёт

[Виталий Першин]

Ness_me, Вы стебетесь, да? Покажите пример той анимации которую вы хотите минифицировать.

нужен размер на порядок меньше.

Сделайте черно-белый гиф в чем проблема?

[Ness_me]

Не стебусь. Возможно, не совсем корректно ставлю вопрос, так как не все тонкости понимаю)
Преобразовать нужно рекламные баннеры для сайта. Вот пример баннера в gif : https://drive.google.com/file/d/1T3QR_gm7xHyzzuIAn...

[Сергей Соколов]

Ness_me, посомтрел пример. Неужели в таком размере с такой редкой частотой кадров баннер весит в mp4 под мегабайт?

Переделать его в HTML5, наверное, можно: общий фон, несколько вариантов центральной коробки, появляется журнал-с-тенью справа внизу. Но и сжать в gif с ограниченной палитрой тоже должно получиться весьма компактно.

[Виталий Першин]

Ness_me, Такую гифку, если правильно сохранить, легко можно уменьшить раз в 10, потом еще и сжать можно попробовать. Попробуйте сохранить каждый кадр в jpg уменьшить максимально как вас устраивает и посчитать сумарно сколько выходит, если устроит, то можно сделать спрайт и при помощи animation step будет вам html5 анимация со сменой кадров

Answer 1

[profesor08]

Нет не можно. gif, mp4 это набор готовых кадров. А анимация на canvas это программируемая штука, и анимация должна быть спроектирована таким образом, чтоб ее можно было запрограммировать. Иначе, как в случае с вашей гифкой, ничего толкового не выйдет. Так как в любом случае понадобится весь набор текстур, их надо будет загрузить, их надо будет накладывать в нужные места по интервалу.

нужен размер на порядок меньше. т.е. исходный креатив прим. 1 Мб, а целевой размер до 100 Кб

Смешно. Без серьезной потери качества невозможно.

Если хочется чтоб было компактно, красиво и масштабируемо, то надо делать всю графику векторной. В ней все описывается параметрами и все выглядит одинаково красиво в любом масштабе.

Все это можно сделать в After Effects, оттуда можно будет экспортировать весь таймлайн, а потом воспроизвести в вебе с помощью специальных инструментов.

Answer 2

[Андрей Ламзин]

Боюсь соврать, но по моему Flash MX мог разложить gif-ку по кадрам *.fla проекта.
А Flash 5 (или 6, последний вобщем) мог экспортировать *.fla проект в html5/js приложение.

Answer 3

[chakaponi]

У вас нет анимации, судя по предоставленной ссылке. У вас есть лишь набор кадров в формате gif.
Ответ: Так как на предоставленной gif отсутствует всякая анимация единственным вариантом является использование gif, mp4 или просто последовательно сменяющихся кадров (глупость)

Answer 4

[SEOD]

А в gif/mp4 вы что будете хтмлу показывать? Как и куда нужно блок передвигать? :) Зачем такой конвертатор?