Гифка на которой слышно звук. Как сделать GIF из видео? Подробная инструкция! Использование сервиса Buildgif

«Что позволило остаться 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, и который возможно будет быстрей работать. Если кто-то сталкивался с подобной задачей, буду признателен за указание в какую сторону смотреть, чтобы написать плагин который обрабатывает определенные типы файлов .

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

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

Видео — тяжелое. Видеоролик будет весить несколько Мб, а аналогичная гифка в 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, и который возможно будет быстрей работать. Если кто-то сталкивался с подобной задачей, буду признателен за указание в какую сторону смотреть, чтобы написать плагин который обрабатывает определенные типы файлов .

Сделать гифку онлайн может каждый пользователь. Такая анимация – это набор упрощенных кадров, которые переведены в формат изображения.

Пользователи интернета используют гифки для того, чтобы обмениваться ими, как смешными шутками или отдельными стоящими моментами из фильма или мультика.

Благодаря стремительному росту спроса на интернет, появился и спрос на услуги провайдеров соответственно.

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

Анимацию можно сделать двумя способами:

• Используя видеоролик в качестве входящих данных;
• Сопоставление одного файла из нескольких выбранных фотографий .

Сервис Минимультик

Сервис Минимультик является одним из самых крупных и распространенных во всем интернете стран СНГ. Главное направление работы сайта – создание гифок из картинок.

Также в конечный результат может быть добавлена надпись и визуальные эффекты .

Создание проводится абсолютно бесплатно.

Чтобы преобразовать набор обычных картинок в анимационную гифку, следуйте инструкции:

• Зайдите на официальный сайт разработчика сервиса. Ссылка: http://minimultik.ru/
• Вы увидите три условно разделенных столбика, информацию в которых необходимо заполнить. Для начала загрузите картинки на сервер сайта, используя клавишу «выбор фотографии и картинки…», которая имеет бежевый цвет на рисунке ниже;

• После выбора картинок можно приступать к редактированию данных анимации. Для этого в меню, которое указано на рисунке 1 укажите необходимый размер гифки, ее ориентацию, цвет фона, тип углов, максимальную длину и частоту кадров в секунду;
• В поле «Текст» можно добавить надпись на один из кадров гифки. Пропустите это поле, если вам не нужно этого делать;
• Точно так же, по желанию пользователя, можно выбрать наличие каких-либо визуальных эффектов;
• Нажмите на клавишу создания анимации из фото. Скорость создания зависит от количества кадров, применяемых эффектов и от частотности показа составляющих изображений.

Также на сервисе поддерживается возможность создания короткой гифки со звуком.

Анимация со звуком – это уже своеобразный видеоролик, который современные пользователи интернета называют вайном (от английского слова “vine”).

Создание анимации прямиком с веб-камеры – с эффектами

Многие пользователи задаются вопросом о том, где создать красивую гифку с вебки.

На самом деле, существую не так много сервисов, которые способны превратить в гифку в режиме реального времени. Одним из таких сервисов является сайт fungif.ru .

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

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

Примеры созданных гифок с веб камер пользователями сервиса в режиме реального времени

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

Готовую гиф-картинку можно скачать на компьютер, а уже с компьютера ее можно распространять в интернете.

Использование сервиса Buildgif

С помощью данного сервиса можно из видео youtube сделать гифку. Так как сервис имеет достаточно узкую направленность работы, пользовательский интерфейс сайта очень простой.

Следуйте короткой инструкции, чтобы создать собственное анимационное изображение с ютуб:

1. Зайдите на официальную страницу приложения в интернете. Ссылка: http://buildgif.com/
2. В текстовом поле вставьте ссылку на веб-страницу с видео, которая ведет на сайт «Ютуб»;
3. Если поиск проведен успешно, ниже появится само видео, как показано на рисунке выше;
4. Проставьте объем анимации в настройках и нажмите на клавишу «Создать анимацию».

Процесс создания анимации с видео на видеохостинге Ютьюб