Разбираемся · Создание онлайн-курсов

Как сделать GIF из видео для короткой инструкции курса

Вырезаем один шаг из записи через FFmpeg, готовим палитру, проверяем кадры и размер файла. Разбираем, когда GIF удобен и когда лучше оставить видео.

В этом материале

Выберите один короткий шаг без зависимости от звука

GIF может показать небольшое изменение интерфейса рядом с текстовой инструкцией: открытие меню, перенос элемента или результат переключения настройки. Для длинного объяснения такой формат неудобен. Если зритель должен слушать речь, ставить запись на паузу и возвращаться к определённому моменту, сохраните видео с подходящими средствами управления. Перевод в анимацию не должен убирать необходимые условия понимания.

Возьмём условный урок о настройке рабочей доски. Нужно показать, где открыть список представлений и как выбрать нужный вариант. Подготовим короткую запись с видимым указателем и понятным конечным состоянием. Названия клиента, личные сообщения и реальные данные заменим учебными до конвертации. В тексте рядом перечислим действия, чтобы анимация не оставалась единственным объяснением.

Не начинайте с уменьшения всей двадцатиминутной записи. Отметьте начало нужного действия и его завершение, посмотрите фрагмент без звука. Если без реплики преподавателя смысл теряется, добавьте текстовое пояснение или выберите другой способ показа. Исходный ролик сохраните отдельно: GIF не заменяет монтажный проект и качественный мастер.

Задайте границы и параметры пробной версии

Для демонстрации команды используем имя lesson.mp4. В пробном плане возьмём четыре секунды, начиная со второй секунды исходника. Итоговая ширина — 640 пикселей, частота — 12 кадров в секунду. Это выбранные параметры примера, а не стандарт для любых интерфейсов. Сначала выясните, сохраняются ли при таком размере нужные надписи и движения указателя.

Если исходник имеет размер 960 × 540, пропорциональное уменьшение ширины до 640 даёт высоту 360 пикселей. Четыре секунды при 12 кадрах в секунду дают 48 кадров. Эти числа пригодятся для проверки команды на тестовом материале. У другой записи частота, длительность и временные метки могут потребовать отдельной проверки, поэтому арифметика не заменяет просмотр результата.

Подготовьте отдельный каталог и новое имя результата step.gif. Команды ниже предполагают установленный FFmpeg, доступный из терминала. Имена с пробелами заключайте в обычные прямые кавычки. Перед обработкой посмотрите параметры исходника; порядок такой проверки разобран в статье про кодек и потоки видео через ffprobe.

Создайте анимацию с палитрой выбранного фрагмента

Выполните следующую команду одной строкой из каталога с исходником. Она сохраняет результат под отдельным именем и не разрешает перезаписывать существующий файл:

ffmpeg -n -ss 2 -t 4 -i "lesson.mp4" -an -vf "fps=12,scale=640:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop -1 "step.gif"

Здесь -ss задаёт начало, а -t перед входом ограничивает читаемую длительность. -an исключает звук. В цепочке фильтров fps задаёт частоту, scale меняет размер с сохранением пропорций, затем поток разделяется для подготовки и применения палитры. Назначение palettegen и paletteuse описано разработчиками FFmpeg. Палитра помогает управлять представлением цветов, но не восстанавливает мелкий текст, потерянный из-за сильного уменьшения.

Параметр -loop -1 отключает повторение; в документации GIF-мультиплексора значение 0 означает бесконечный цикл. Для нашей короткой инструкции выбираем однократное воспроизведение и проверяем поведение в месте размещения. Если захотите повтор, сначала решите, как ученик остановит движение и прочитает соседний текст.

Убедитесь, что получили новый файл нужного состава

Откройте step.gif отдельно и просмотрите начало, само действие и итоговое состояние. Указатель должен приводить к нужному элементу, а последняя картинка — подтверждать результат. Проверьте читаемость при реальной ширине размещения, а не только в увеличенном окне. При неудачной пробе вернитесь к исходной записи и измените один параметр, сохранив результат под новым именем.

Для технической проверки можно выполнить команду ffprobe, которая считает декодированные кадры и показывает состав потоков вместе с параметрами файла:

ffprobe -v error -count_frames -show_streams -show_format -of json "step.gif"

В нашей локальной проверке на синтетическом ролике FFmpeg 7.1 создал GIF 640 × 360 с 48 декодированными кадрами и длительностью 4 секунды. Аудиопотоков в результате нет. Это проверка команды на тестовом изображении, а не доказательство читаемости реального интерфейса или совместимости любого редактора курса. Собственный учебный фрагмент необходимо принять отдельно.

Следите и за сообщениями терминала. При повторном запуске с -n готовый файл не перезаписывается. В проверенной сборке отказ сопровождался сообщением о существующем файле, хотя код завершения оказался нулевым. Поэтому не считайте один нулевой код подтверждением новой конвертации: проверяйте сообщение, имя результата, время изменения и содержимое файла.

Сравните размер и удобство с исходным видео

Запишите размер GIF в байтах и сравните с подходящей видеоальтернативой. Анимация не обязана быть меньше MP4. Для честного сравнения вариантов доставки используйте одинаковые границы фрагмента и сопоставимый размер изображения. Сравнение четырёхсекундной GIF со всем восьмисекундным исходником не показывает эффективность форматов на равных условиях.

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

Сохраните короткую карточку решения: границы, ширина, частота, режим повторения, размер и результат просмотра. Вместо «качество хорошее» напишите, различим ли нужный пункт меню и виден ли выбранный вариант. Если GIF не проходит эту проверку, оставьте видео или последовательность статичных изображений с подписями. Формат выбирается по задаче, а не по желанию конвертировать каждый ролик.

Проверьте управление движением и текстовую версию

У обычного изображения GIF нет встроенной панели паузы, как у видеоплеера. Способ запуска и остановки зависит от страницы или приложения, где оно показано. В пояснении W3C к Pause, Stop, Hide разобран случай автоматически начавшегося движения дольше пяти секунд рядом с другим содержимым. Бесконечное повторение короткого фрагмента также создаёт продолжающееся движение; малая длительность одного цикла сама по себе вопрос не решает.

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

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

Источники

  1. palettegen и paletteuse описано разработчиками FFmpeg ↗
  2. документации GIF-мультиплексора ↗
  3. пояснении W3C к Pause, Stop, Hide ↗
Создать аккаунт и собирать свою библиотеку →
От знаний — к своему курсу

Создайте свой курс в Umhub

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

Создать курс