Как сделать GIF из видео? Подробная инструкция! Как из видео сделать гифку разными способами

Зачем вообще может понадобиться сделать гифку из видео?

Почему просто не использовать видео?

Видео — тяжелое. Видеоролик будет весить несколько Мб, а аналогичная гифка в 10-100 раз меньше.

Да, интернет-каналы толстеют, но ведь есть еще и мобильный интернет, есть медленные компьютеры и прочее.

У GIF-анимации есть 2 функции…

Для чего используют GIF?

Я вижу 2 функции. Первая — показать какой-то процесс наглядно.

Вот, например, моя гифка, показывающая как работает программа Punto Switcher:

Можно было долго описывать, как работает программа, но гораздо проще засунуть такую вот гифку. И всем все понятно. Ее вес — всего 29 Кб.

Кстати, второй вариант — сделать крутой скриншот со стрелками. О том, как это делать я писал .

Вторая функция — просто ФАН (развлечение, шутка и т. д.).

Когда в статье нужно показать какую-то эмоцию лучше средства, чем GIF-анимация не найти.

Например, эта гифка отлично показывает злость (499 кб):

а это — скуку (392 кб):

а вот задумчивость (385 кб):

Вставив такую картинку в статью вы сразу сполна передадите вашу эмоцию. Разве не здорово?

Но как найти подходящую гифку онлайн?

Например, я с его помощью смастерил за 5 минут такую гифку из видео на YouTube. Размер -всего 390 Кб:

Ее можно использовать, когда нужно показать, например, излишний формализм и гламур в абсолютно неподходящих для этого обстоятельствах.

О том, как я сделал эту анимацию, а также о том, как вообще уменьшать размеры GIF — моя пошаговая инструкция .

Вариант 2. Гифка со съемки экрана

Если вы хотите записать гифку с каким-то процессом (например, чтобы послать коллеге наглядное пособие), то вы можете просто снять скринкаст любой программой.

Я же для этого пользуюсь удобным программой-комбайном ShareX (ссылка).

Она, конечно, позволяет снять и видео с экрана, но может и сразу создать гифку из всего процесса.

Не гифом единым. Coub!

Картинка — хорошо. Но иногда со звуком все еще лучше. Гифка со звуком — это Coub.

В Интернете полно смешных кубов.

Моя любимая — «Ну и пожалуйста! Не очень то и хотелось!»

А вот про наших народных умельцев, которые дадут жару любому Масачусетскому технологическому:

А этот куб про дороги России. Мы такие сцены видим каждую весну, к сожалению:

Лесной стриптиз. Ни разу не был на стриптизе, теперь знаю, как это бывает:

Ну, а в этом состоянии, я уверен, каждый бывает в пятницу вечером.

«Что позволило остаться GIF, это - циклическое проигрывание анимации, которое добавил Netscape. Если бы Netscape не добавил поддержку GIF в свой браузер, GIF умер бы в 1998 »

Александр Тревор (Alexander Trevor),
руководитель команды по созданию GIF в CompuServe

Формат GIF в июне этого года отпраздновал свое 25-летие, и является сегодня самым старым графическим форматом, который распространен в интернете. Посвящая выходные просмотру смешных анимированных гифок понимаешь, что некоторые из них были бы в разы лучше со звуком. Все текущие решения для циклической анимации со звуком (например: coub.com , gifsound.com) предлагают отказаться от GIF, но это - не выход. И я решил пожертвовать просмотром гифок на выходных для решения этой крайне важной проблемы.

Первая в интернете гифка со звуком по ссылке . Надо нажать на синюю кнопку, а потом на гифке. Плеер должен работать во всех современных браузерах (тестировался в последнем Firefox и Chrome).

Гифок под катом не будет, а будет процесс создания расширения для стандарта, написания конвертера и плеера.

С 1987 формат GIF пережил всего два существенных изменения:

1. В 89 году вышла вторая версия формата (названная GIF 89a). Стало возможным указывать задержку между картинками (нескольких картинок в одном файле было в первом формате GIF 87a). Сторонние разработчики теперь смогли добавлять свои собственные блоки в файл (Application Extension Block).
2. В 90 году компания Netscape добавила свой блок, который позволял указывать сколько раз будет повторяться анимация.

Разработка расширения формата

Как было сказано выше, стандарт GIF 89a позволяет приложениям размещать в GIF файле свои данные. Формат блока расширения для приложений:

Попробуем уместить сюда заголовка WAVE файла:

Так как размер блока контролируется форматом GIF, выкинем из заголовка поле с размером данных, а в идентификатор приложения запишем «RIFFWAVE». Остаток WAVE файла запишем как вложенные GIF блоки.

Блок со звуком будем вставлять прямо перед первым блоком с изображением (на самом деле можно его вставить в любом месте).

Разработка конвертера

Конвертер на входе принимает GIF и WAVE файлы, а на выходе выдает GIF с RIFFWAVE блоком. Исходный код можно посмотреть посмотреть на .

Код довольно простой, читаем WAVE файл, создаем из него GIF блок. Потом читаем гиф файл и записываем все блоки, как только находим первый блок с картинкой, перед ним вставляем блок со звуком. Самый важный участок кода - конвертация WAVE файла в GIF блок:

Def get_wav_block(file): # читаем данные из фала (signature, size, format) = unpack("4sI4s", file) if signature != "RIFF": raise Exception("Not a RIFF file") if format != "WAVE": raise Exception("Not a WAVE file") data = file.read(size - 4) # Готовим заголовок блока wave_block_header = struct.pack("BBB8sBBB", 0x21, 0xff, 11, "RIFFWAVE", 0, 0, 0) data_subblocks = ; # разбиваем данные на блоки из 255 байт for i in range(0, len(data) // 255): data_subblocks.append(chr(0xff)) data_subblocks.append(data) if (len(data) % 255) > 0: rest = len(data) % 255 data_subblocks.append(chr(rest)) data_subblocks.append(data[-rest:]) # добавляем сивол окончания блока data_subblocks.append(chr(0)) return "".join(data_subblocks)

Делаем гифку со звуком

Делаем анимированный гиф:

# ffmpeg получаем отдельные кадры ffmpeg -ss 0:00:9.73 -t 2.86 -i warlus.webm -s 500x280 -r 10 frames/image%03d.png # делаем анимированный GIF convert -delay 10 -loop 0 frames/*.png source.gif

Получаем звук и проверяем, что все выглядит (и звучит), как мы запланировали:

Mplayer -ss 0:00:9.73 -endpos 2.86 warlus.webm -ao pcm:file="source.wav" -vo null mplayer -loop 0 -audiofile source.wav source.gif

Конвертируем в GIF со звуком

Python wave2gif.py example/source.gif example/source.wav result.gif

«Что позволило остаться GIF, это - циклическое проигрывание анимации, которое добавил Netscape. Если бы Netscape не добавил поддержку GIF в свой браузер, GIF умер бы в 1998 »

Александр Тревор (Alexander Trevor),
руководитель команды по созданию GIF в CompuServe

Формат GIF в июне этого года отпраздновал свое 25-летие, и является сегодня самым старым графическим форматом, который распространен в интернете. Посвящая выходные просмотру смешных анимированных гифок понимаешь, что некоторые из них были бы в разы лучше со звуком. Все текущие решения для циклической анимации со звуком (например: coub.com , gifsound.com) предлагают отказаться от GIF, но это - не выход. И я решил пожертвовать просмотром гифок на выходных для решения этой крайне важной проблемы.

Первая в интернете гифка со звуком по ссылке . Надо нажать на синюю кнопку, а потом на гифке. Плеер должен работать во всех современных браузерах (тестировался в последнем Firefox и Chrome).

Гифок под катом не будет, а будет процесс создания расширения для стандарта, написания конвертера и плеера.

С 1987 формат GIF пережил всего два существенных изменения:

1. В 89 году вышла вторая версия формата (названная GIF 89a). Стало возможным указывать задержку между картинками (нескольких картинок в одном файле было в первом формате GIF 87a). Сторонние разработчики теперь смогли добавлять свои собственные блоки в файл (Application Extension Block).
2. В 90 году компания Netscape добавила свой блок, который позволял указывать сколько раз будет повторяться анимация.

Разработка расширения формата

Как было сказано выше, стандарт GIF 89a позволяет приложениям размещать в GIF файле свои данные. Формат блока расширения для приложений:

Попробуем уместить сюда заголовка WAVE файла:

Так как размер блока контролируется форматом GIF, выкинем из заголовка поле с размером данных, а в идентификатор приложения запишем «RIFFWAVE». Остаток WAVE файла запишем как вложенные GIF блоки.

Блок со звуком будем вставлять прямо перед первым блоком с изображением (на самом деле можно его вставить в любом месте).

Разработка конвертера

Конвертер на входе принимает GIF и WAVE файлы, а на выходе выдает GIF с RIFFWAVE блоком. Исходный код можно посмотреть посмотреть на .

Код довольно простой, читаем WAVE файл, создаем из него GIF блок. Потом читаем гиф файл и записываем все блоки, как только находим первый блок с картинкой, перед ним вставляем блок со звуком. Самый важный участок кода - конвертация WAVE файла в GIF блок:

Def get_wav_block(file): # читаем данные из фала (signature, size, format) = unpack("4sI4s", file) if signature != "RIFF": raise Exception("Not a RIFF file") if format != "WAVE": raise Exception("Not a WAVE file") data = file.read(size - 4) # Готовим заголовок блока wave_block_header = struct.pack("BBB8sBBB", 0x21, 0xff, 11, "RIFFWAVE", 0, 0, 0) data_subblocks = ; # разбиваем данные на блоки из 255 байт for i in range(0, len(data) // 255): data_subblocks.append(chr(0xff)) data_subblocks.append(data) if (len(data) % 255) > 0: rest = len(data) % 255 data_subblocks.append(chr(rest)) data_subblocks.append(data[-rest:]) # добавляем сивол окончания блока data_subblocks.append(chr(0)) return "".join(data_subblocks)

Делаем гифку со звуком

Делаем анимированный гиф:
# ffmpeg получаем отдельные кадры ffmpeg -ss 0:00:9.73 -t 2.86 -i warlus.webm -s 500x280 -r 10 frames/image%03d.png # делаем анимированный GIF convert -delay 10 -loop 0 frames/*.png source.gif
Получаем звук и проверяем, что все выглядит (и звучит), как мы запланировали:
mplayer -ss 0:00:9.73 -endpos 2.86 warlus.webm -ao pcm:file="source.wav" -vo null mplayer -loop 0 -audiofile source.wav source.gif
Конвертируем в GIF со звуком
python wave2gif.py example/source.gif example/source.wav result.gif

Делаем плеер

За основу плеера возьмем jsgif - плеер для анимированных GIF на JavaScript. jsgif разбирает gif и проигрывает рисуя каждый кадр на Canvas. Добавим в него функцию, которая при обнаружении «RIFFWAVE» блока:

• преобразовываем данные из блока обратно в формат WAVE файла;
• конвертируем полученный файл в data: URL и передаем в элемент Audio.

var doSound = function(sound) { // Header var size = sound.data.length + 4 var size_text = String.fromCharCode(size & 255, (size >> 8) & 255, (size >> 16) & 255, (size >> 24) & 255); var header = [ "RIFF", size_text, // length "WAVE" ].join(""); var out = .join(""); var dataURI = "data:audio/wav;base64," + escape(window.btoa(out)); sound_element = new Audio(); sound_element.src = dataURI; };
jsgif работает не быстро, а с добавлением звука стал еще медленнее. Так же, чтобы получить данные файла, плеер вызывает XMLHttpRequest, поэтому плеер работает только с картинками с одного домена. Но разве это помехи для искусства.

Что дальше?

Радоваться гифкам со звуком. Можно реализовать плагин для браузеров, который бы позволял проигрывать такие гифки без дополнительного XMLHttpRequest, и который возможно будет быстрей работать. Если кто-то сталкивался с подобной задачей, буду признателен за указание в какую сторону смотреть, чтобы написать плагин который обрабатывает определенные типы файлов .

«Что позволило остаться GIF, это - циклическое проигрывание анимации, которое добавил Netscape. Если бы Netscape не добавил поддержку GIF в свой браузер, GIF умер бы в 1998 »

Александр Тревор (Alexander Trevor),
руководитель команды по созданию GIF в CompuServe

Формат GIF в июне этого года отпраздновал свое 25-летие, и является сегодня самым старым графическим форматом, который распространен в интернете. Посвящая выходные просмотру смешных анимированных гифок понимаешь, что некоторые из них были бы в разы лучше со звуком. Все текущие решения для циклической анимации со звуком (например: coub.com , gifsound.com) предлагают отказаться от GIF, но это - не выход. И я решил пожертвовать просмотром гифок на выходных для решения этой крайне важной проблемы.

Первая в интернете гифка со звуком по ссылке . Надо нажать на синюю кнопку, а потом на гифке. Плеер должен работать во всех современных браузерах (тестировался в последнем Firefox и Chrome).

Гифок под катом не будет, а будет процесс создания расширения для стандарта, написания конвертера и плеера.

С 1987 формат GIF пережил всего два существенных изменения:

1. В 89 году вышла вторая версия формата (названная GIF 89a). Стало возможным указывать задержку между картинками (нескольких картинок в одном файле было в первом формате GIF 87a). Сторонние разработчики теперь смогли добавлять свои собственные блоки в файл (Application Extension Block).
2. В 90 году компания Netscape добавила свой блок, который позволял указывать сколько раз будет повторяться анимация.

Разработка расширения формата

Как было сказано выше, стандарт GIF 89a позволяет приложениям размещать в GIF файле свои данные. Формат блока расширения для приложений:

Попробуем уместить сюда заголовка WAVE файла:

Так как размер блока контролируется форматом GIF, выкинем из заголовка поле с размером данных, а в идентификатор приложения запишем «RIFFWAVE». Остаток WAVE файла запишем как вложенные GIF блоки.

Блок со звуком будем вставлять прямо перед первым блоком с изображением (на самом деле можно его вставить в любом месте).

Разработка конвертера

Конвертер на входе принимает GIF и WAVE файлы, а на выходе выдает GIF с RIFFWAVE блоком. Исходный код можно посмотреть посмотреть на .

Код довольно простой, читаем WAVE файл, создаем из него GIF блок. Потом читаем гиф файл и записываем все блоки, как только находим первый блок с картинкой, перед ним вставляем блок со звуком. Самый важный участок кода - конвертация WAVE файла в GIF блок:

Def get_wav_block(file): # читаем данные из фала (signature, size, format) = unpack("4sI4s", file) if signature != "RIFF": raise Exception("Not a RIFF file") if format != "WAVE": raise Exception("Not a WAVE file") data = file.read(size - 4) # Готовим заголовок блока wave_block_header = struct.pack("BBB8sBBB", 0x21, 0xff, 11, "RIFFWAVE", 0, 0, 0) data_subblocks = ; # разбиваем данные на блоки из 255 байт for i in range(0, len(data) // 255): data_subblocks.append(chr(0xff)) data_subblocks.append(data) if (len(data) % 255) > 0: rest = len(data) % 255 data_subblocks.append(chr(rest)) data_subblocks.append(data[-rest:]) # добавляем сивол окончания блока data_subblocks.append(chr(0)) return "".join(data_subblocks)

Делаем гифку со звуком

Делаем анимированный гиф:
# ffmpeg получаем отдельные кадры ffmpeg -ss 0:00:9.73 -t 2.86 -i warlus.webm -s 500x280 -r 10 frames/image%03d.png # делаем анимированный GIF convert -delay 10 -loop 0 frames/*.png source.gif
Получаем звук и проверяем, что все выглядит (и звучит), как мы запланировали:
mplayer -ss 0:00:9.73 -endpos 2.86 warlus.webm -ao pcm:file="source.wav" -vo null mplayer -loop 0 -audiofile source.wav source.gif
Конвертируем в GIF со звуком
python wave2gif.py example/source.gif example/source.wav result.gif

Делаем плеер

За основу плеера возьмем jsgif - плеер для анимированных GIF на JavaScript. jsgif разбирает gif и проигрывает рисуя каждый кадр на Canvas. Добавим в него функцию, которая при обнаружении «RIFFWAVE» блока:

• преобразовываем данные из блока обратно в формат WAVE файла;
• конвертируем полученный файл в data: URL и передаем в элемент Audio.

var doSound = function(sound) { // Header var size = sound.data.length + 4 var size_text = String.fromCharCode(size & 255, (size >> 8) & 255, (size >> 16) & 255, (size >> 24) & 255); var header = [ "RIFF", size_text, // length "WAVE" ].join(""); var out = .join(""); var dataURI = "data:audio/wav;base64," + escape(window.btoa(out)); sound_element = new Audio(); sound_element.src = dataURI; };
jsgif работает не быстро, а с добавлением звука стал еще медленнее. Так же, чтобы получить данные файла, плеер вызывает XMLHttpRequest, поэтому плеер работает только с картинками с одного домена. Но разве это помехи для искусства.

Что дальше?

Радоваться гифкам со звуком. Можно реализовать плагин для браузеров, который бы позволял проигрывать такие гифки без дополнительного XMLHttpRequest, и который возможно будет быстрей работать. Если кто-то сталкивался с подобной задачей, буду признателен за указание в какую сторону смотреть, чтобы написать плагин который обрабатывает определенные типы файлов .

Учёный из Шотландии обратила внимание на иллюзию, которую мозг создаёт при просмотре очередной гифки из сети. Многим смотрящим на неё людям кажется, что они слышат звуки прыжков, которые изображение не может воспроизводить ввиду своей сути. Это не первая гифка с подобным эффектом, но в сравнении со многими другими звуки на ней слышно гораздо «отчётливее».

Gif-файлы создаются из изображений или последовательности кадров, и априори не могут производить какие-либо звуки. Но исследователь Лиза Дебрюн из Глазго предполагает, что при должном умении звук можно услышать и на картинке. Она поделилась с пользователями сети старой гифкой в стиле , которая заставляет многих почувствовать звуки. На ней изначально происходят невероятные вещи - три вышки ЛЭП играют с проводами как со скакалкой. Но когда одна из них приземляется, Лиза слышит грохот.

«Послушайте» сами.

Does anyone in visual perception know why you can hear this gif? pic.twitter.com/mcT22Lzfkp

«Кто-нибудь знает, почему вы можете слышать эту гифку?» - спросила Лиза.

Мнения комментаторов разделились, но большинство предположило, что звук кажется слышен из-за готовности мозга. Человек привык к тому, что подобная конструкция падает на землю громко, и сам додумывает звуки этого падения.

Lisa DeBruine

- Уоу, это поражает. Думаю, ты можешь «слышать» это, потому что визуальный ряд показывает звуковую волну, которую твоя слуховая система ожидает, и готовится к ней так, чтобы звук не оглушил тебя. Ухо как бы сжимается как глаз.
- Моё восприятие тоже так работает. Я могу самостоятельно «зажмурить» уши, и это похожее чувство.

Другие начали присылать свои примеры. Звук действительно можно «услышать», когда к нему человека готовит зрение, и эта идея не нова. Нужно просто заставить изображение дрожать тогда, когда всё вокруг дрожало бы в реальности.

А здесь некоторые слышат звук пружины.

I started out with thudding, but now alternate with a comical “sproing”. pic.twitter.com/Hjr23NZdO6

John, but festive 🎄 (@john_axon)