Инструменты VidGrid-HTML - Настраиваемые сетки миниатюр видео в браузере

N

NessaCRT4

Лёркер
Регистрация
13.08.2023
Сообщения
471
Реакции
0
Привет!
Мне надоело видеть столько постов с одной только ссылкой на видео, без превью, без названия... так что я решил приложить немного усилий (и спалил пару токенов LLM), чтобы сделать новый инструмент, с которым каждый сможет легко делать красивые превью-картинки.
Этот инструмент работает полностью в браузере; ничего скачивать и устанавливать не нужно. Благодаря адаптивному дизайну им можно пользоваться и на мобильных (Android/iOS).


VidGrid-HTML
Настраиваемые сетки скриншотов из видео прямо в браузере
Пробуйте здесь: https://vidgrid-html-87fe95.gitlab.io/
Основные возможности
  • Генерирует контактные листы в JPG или анимированном WebP для видео прямо в браузере
  • Работает локально, загружать ничего не нужно
  • Берёт кадры через равные промежутки времени по всему видео или по своим таймкодам, которые можно задать самому!
  • Настраиваемая сетка (столбцы/строки), отступы, ширина вывода, наложение таймкода, цвета, необязательный заголовок с метаданными
  • Создавайте свои пресеты с любимыми настройками (хранятся локально в браузере)
  • Пакетная обработка, скачивание в ZIP и поддержка загрузки/копирования ссылки (только для галерей Chevereto с включённой загрузкой через API; JPGFish/JPG6 пока, к сожалению, нет)
  • Базовая поддержка обрезки VR-видео (SBS и TB)
  • Приватность прежде всего: вся обработка происходит на твоём устройстве.
Примеры статичного/неподвижного результата с разными настройками:




Примеры анимированного результата с разными настройками:



Известные ограничения
Инструмент использует встроенное в браузер извлечение кадров, так что по правилу: если видео воспроизводится в твоём браузере, оно должно подойти (совет: некоторые браузеры вроде Chrome поддерживают больше видеокодеков, а значит, и больше файлов). Я сделал запасной вариант на FFmpeg WASM, но он намного медленнее и упирается в лимиты памяти. В худшем случае получатся пустые/битые кадры или файл будет пропущен, если он совсем не подходит. Не удивляйтесь, если старые форматы и старые видео/аудиокодеки обработаются неправильно... браузеры сейчас умеют гораздо больше, но не всё!
Спасибо, что заглянули!
И спасибо Utopic за то, что дал мне повод вернуться к заброшенному проекту, и за то, что протестировал первым.
А, и я выложил VidGrid-HTML в open-source (лицензия MIT), если кому интересен исходный код: https://gitlab.com/aknott001/vidgrid-html
Любые баг-репорты, предложения и отзывы приветствуются в этой теме.
 
Фантастический инструмент, круто, что он развивается. Надеюсь, людям он пригодится.
 
Наконец-то, искал несколько дней, а находил только старые видео с YouTube и непонятные инструкции про "Contact sheets"
спасибо за помощь!
 
Крупное обновление, v.2.0.0 вышла и доступна по тому же URL, что выше.
Анимированные миниатюры уже здесь! и несколько фиксов.
Новые опции «Анимированный вывод (WebP)» (их тоже можно сохранять как пресеты):

Пример результата:


 
Ты реально GOAT, обидно, что ты сделал это ровно тогда, когда я запостил :KEKWlaugh:
 
Спасибо, следующий пост всегда найдётся... надеюсь :KEKW:
Забыл дать совет про размер файла анимированных миниатюр: в зависимости от ширины, FPS, качества и сжатия WebP можно быстро упереться в лимит JPG6 в 15MB. Настройки по умолчанию довольно щедрые по качеству, можно снизить качество до 75-80 и, возможно, уменьшить ширину, чтобы почти всегда укладываться в лимит.
 
Охуенная работа! Я знаю, ты начинал просто с чего-то базового, но это превратилось в большой проект, которым реально стоит пользоваться. Отличная работа!
Есть планы на новые фичи?
Советую ещё добавить переключатель VR, если это возможно!
 
И что это должно включать? С VR-форматом я особо не работаю, если у тебя есть примеры видео и описание того, что ты ждёшь от этой функции, возможно, я гляну.
 
VR-видео сейчас в основном Side by Side, то есть два изображения, разделённые на экране для двух глаз.
Если использовать генератор миниатюр (в данном случае твой), он снимает кадр (side by side) как есть, потому что знает, что это видео. Правда, это засоряет контент, если хочешь выложить полноценные скрины.
Используя SCS https://vongoob9.gitlab.io/subtitles_contact_sheet_qt/
Там есть VR-переключатель, он выкидывает один глаз и оставляет другой, в итоге больше сеток с контентом на экране и файл меньшего разрешения
Так что можно получить такую бомбу, как эта, и поставить маленьким превью на торрентах/bbs и т.д.
 
nattieivanova
Понял, спасибо за объяснения, думаю, смогу сделать что-то для SBS-форматов, правда без коррекции fisheye... должно работать даже для анимированных сеток.
Я только что немного поэкспериментировал с фильтрами FFMPEG WASM для исправления эффекта fisheye и других форматов, там дофига опций: https://ffmpeg.org/ffmpeg-filters.html#v360
Но печальная реальность обработки в браузере в том, что мы ограничены и по памяти, и по потокам CPU. Не вдаваясь в детали, сначала файл нужно загрузить в память браузера, и всё, что больше пары сотен МБ, идёт с трудом (про телефон я вообще молчу)... а VR-файлы обычно весят минимум несколько ГБ... но думаю, простой «VR-режим» с выбором левого/правого глаза уже был бы неплохим дополнением, так что скоро займусь этим. Спасибо за идею!
 
Вот это тулза, супер удобная и работает на андроиде! Спасибо aknott! Просто охуенно и впечатляюще. У SimpCity есть лимит по размеру для webp? Типа как для гифок? Кажется, webp можно постить только как прямой просмотр или через bbcode full, ссылкой? Я стараюсь держать свои гифки до 3 МБ.
 
Нужно залить любой .jpg / .gif / .webp файл, который выдаст тулза, на jpg6, а потом вставить в пост как обычную картинку.
Лучше не делать тяжёлые гифки, чтобы форум не тормозил. Да и у jpg6 всё равно есть лимит на размер файла, так что если гифка слишком тяжёлая, он не даст её загрузить.
 
Не за что, рад, что пригодилось! :pepoLove:
Надеюсь, когда-нибудь это получится интегрировать с форумом плотнее, я спрашивал админов JPGFish, могут ли они разрешить загрузку через API для этого, тогда юзеры смогли бы легко хостить миниатюры и просто копировать коды в сообщение... можно было бы даже сделать кнопку/попап как у "Upload images", но пока ответа нет (думаю, это непросто, куча ботов захочет абьюзить загрузку через API):
Лимит размера на JPGFish 15MB, я использую "BBCode Medium", даже если миниатюра на SimpCity не анимированная... думаю, кто хочет глянуть превью, нормально отнесётся к одному клику и получит сюрприз, что она анимированная :KEKW:
Маленькая анимированная миниатюра (если юзать "BBCode Full") всё равно недостаточно большая, чтобы много чего разглядеть... так что кроме того, что это больше кликбейт, не думаю, что это перевешивает минус в виде загрузки до 15MB на каждую миниатюру для каждого юзера, который открывает тему (10 таких, и люди уже скачали 150MB 😓).
И наконец, думаю, админы/модеры предпочитают "BBCode Medium", потому что это приводит юзеров на JPGFish и позволяет им показывать рекламу, а это помогает оплачивать серверы.
 
nattieivanova
Добавил выпадающий список "VR Video" с опциями для обрезки самых распространённых форматов. Как и ожидалось, обработка через FFMPEG WASM не вариант, ресурсов в браузере слишком мало.

Ещё я немного переставил/переделал поля ввода, добавил сворачиваемые fieldset'ы, это должно немного помочь со скроллом на телефоне. И, кажется, чуть улучшил производительность: у меня была бесполезная перерисовка хедера, которая не вызывала видимых проблем, поэтому её не замечали.
В общем, вот v.2.1.0, тот же URL.
 
Бывало, что генерируешь превьюшки, а автоматические таймстемпы, выбранные тулзой, напрочь мимо тех хороших моментов, которые ты хотел показать?
Всё, больше такого не будет! В VidGrid-HTML v.2.2.0 появился способ переопределять «авто» таймстемпы для каждого выходного элемента, с «редактором таймстемпов», где можно задать каждую ячейку превью как хочешь. Он автоматически смешивается с автоматическими таймстемпами, если ты указал маркеров недостаточно, и игнорирует последние, если указал слишком много.

Превью видео в редакторе работает только для видео, которые можно открыть и посмотреть в браузере; для неподдерживаемых видео редактор всё равно работает, просто без превью.
Крутой кейс: если делаешь превью из одной ячейки 1x1, раньше таймстемп автоматически стоял в середине видео, а теперь можно выбрать точно, где хочешь... и для анимированных, и для статичных превью!
 
Только что выпустил новую версию:
VidGird-HTML v.2.3.0
  • Управление задачами вместо пакетов файлов: добавить файлы, удалить, поставить в очередь заново, перезапустить всё.
  • Улучшенный редактор таймстемпов для мобильных и горячие клавиши.
  • Улучшено определение таймстемпов, когда задано недостаточно своих маркеров; размер сетки теперь можно менять, не сбрасывая свои таймстемпы.
  • Свёрнутое/развёрнутое состояние секций настроек сохраняется для каждого пресета.
 
Крупное обновление версии, тот же URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.0.0
  • НОВОЕ - Редактор шаблонов сетки: теперь можно создавать собственные шаблоны неравномерной сетки, а не только столбцы*строки.
    • Работает со статичными и анимированными сетками, а также вместе с редактором таймстемпов — выбирай идеальный кадр для ячеек полного размера!




    • Вот несколько примеров:




  • НОВОЕ - Настройки: 4 темы для смены внешнего вида приложения. «Показывать превью» теперь глобальный параметр. «Места загрузки» перенесены в это окно.








  • НОВОЕ- Компактная панель, на мобильных и на десктопе: когда добавляешь много файлов, мотать вверх, чтобы запустить/посмотреть прогресс обработки, быстро надоедает. Чтобы это исправить, сверху автоматически появляется новая панель, когда верхняя панель обработки не видна. Можно развернуть её для полного функционала (даже чтобы добавить ещё файлов прямо во время обработки) или использовать свёрнутой как ярлык... больше никакой прокрутки наверх.




  • НОВОЕ- Кастомизация стиля
    • Шрифт и размеры шрифта для таймкода и заголовка:




    • Улучшенный выбор цвета для фона/текста




  • НОВОЕ - 12 пресетов по умолчанию с разными настройками, шаблонами/размерами сетки. Их можно редактировать/удалять как хочешь... если у тебя уже были настройки, придётся удалить/очистить localStorage приложения/сайта в браузере (загугли).


  • ИСПРАВЛЕНИЯ - В целом лучше производительность, чуть улучшена работа с инстансами FFMPEG, лучше поддержка мобильных, особенно в редакторе таймстемпов.
Как и раньше, если найдёте баги или есть предложения — спрашивайте здесь!
 
Небольшое обновление версии, ссылка та же:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.1.1
  • НОВОЕ - Анимированный режим Sequence (последовательность)
    • Заменяет сетку и показывает короткие отрезки один за другим (последовательно), учитывая выбранную ширину вывода (видео масштабируется), позволяет использовать оверлеи «Показать метаданные заголовка» и «Таймкод», потому что каждый кадр собирается отдельно.


    • Поддержка кодирования в MP4 для ВСЕХ анимированных последовательностей
    • Вот несколько примеров:

      WEBP «Статика (удерживать кадр)»

      WEBP «Видео (воспроизвести отрезок)»





      MP4 «Видео (воспроизвести отрезок)»

  • НОВОЕ- Анимированная последовательность «Видео со звуком»
    • В той же группе настроек, если выбрать «Видео со звуком» в «Режиме рендера», FFMPEG будет резать отрезки видео сразу со звуком и перекодировать их в браузерные кодеки. Ширина вывода учитывается, но оверлея (метаданные/таймкод) нет. В этом режиме доступен только MP4 (это единственный формат со звуком).

      MP4 «Видео со звуком»

  • НОВОЕ- Настройки места загрузки «Разрешённые расширения» и «Макс. размер файла», которые проверяются перед попыткой загрузить готовый результат.


  • НОВОЕ - Аудио-битрейт и количество дорожек добавлены в метаданные заголовка
  • НОВОЕ - Добавлено 4 стандартных пресета для режима Sequence.
  • ФИКСЫ - Исправлена небольшая утечка памяти в фоллбэке FFMPEG и в горячих клавишах редактора таймстемпов.
Как и раньше, если найдёте баги или есть идеи для новых фич — пишите сюда!
 
Чувак, этот сайт — просто шутка.
 
thotnow А, это опечатка в ссылке, в конце не хватает «l» (маленькая L), так что проекта не существует, и Gitlab, видимо, думает, что для доступа нужен аккаунт. Мой косяк.
Вот правильная ссылка: https://gitlab.com/aknott001/vidgrid-html
Но если тебе просто нужно пользоваться тулзой, туда ходить не надо, адрес тулзы: https://vidgrid-html-87fe95.gitlab.io/
 
Для ответа нужно войти/зарегистрироваться
Назад
Верх