📽️ Генератор скринлиста к видео

Мощное веб-приложение для создания профессиональных скринлистов (наборов кадров) из видео файлов с максимально эффективным использованием пространства.

🚀 Функциональность

• Загрузка видео: Поддержка drag & drop и выбор файлов
• Гибкие настройки:
  • Количество кадров (4-100) - для детального анализа длинных видео
  • Количество колонок в сетке (3-10) - от классических до плотных компоновок
  • Ширина скринлиста (800-1600px) - точный контроль размера выходного файла
  • Показ временных меток
• Умный предварительный просмотр: Крупные скриншоты (до 400px) для удобного просмотра
• Компактный экспорт: Максимально эффективное использование пространства в скачиваемом файле
• Подробная информация: Размер файла, разрешение, технические характеристики
• Адаптивный дизайн: Работает на всех устройствах

🛠️ Технологии

• HTML5 - структура приложения
• CSS3 - современные стили и анимации
• JavaScript (ES6+) - логика обработки видео
• Canvas API - захват кадров из видео
• File API - работа с файлами

📱 Поддерживаемые форматы

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

• MP4 (H.264, H.265)
• WebM (VP8, VP9, AV1)
• OGG (Theora)
• MOV
• AVI
• MKV

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

1. Загрузите видео:

   • Перетащите файл в область загрузки
   • Или нажмите кнопку "Выбрать файл"

2. Настройте параметры:

   • Выберите количество кадров (4-100)
   • Установите количество колонок (3-10)
   • Задайте ширину скринлиста (800-1600px)
   • Включите/выключите временные метки

3. Создайте скринлист:

   • Нажмите "Создать скринлист"
   • Дождитесь завершения обработки
   • Просмотрите крупные превью

4. Скачайте компактный результат:

   • Нажмите "Скачать как изображение"
   • Получите оптимизированный файл с максимальным использованием пространства

📊 Примеры использования

Быстрый обзор

• 9 кадров, 3 колонки, 1200px - классический формат для коротких видео

Подробный анализ

• 25 кадров, 5 колонок, 1400px - детальный просмотр средних видео

Полный скринлист

• 50-100 кадров, 8-10 колонок, 1600px - профессиональный анализ длинных фильмов

Компактные варианты

• 20 кадров, 6 колонок, 800px - для веб-страниц и мобильных устройств

⚡ Особенности

🖥️ Двухуровневое отображение

• Предварительный просмотр: Крупные скриншоты до 400px для комфортного просмотра
• Скачиваемый файл: Максимально компактное размещение с эффективным использованием пространства

🎯 Точный контроль размеров

• Ширина скринлиста: Определяет точный размер выходного файла (800-1600px)
• Автоматический расчёт: Размеры скриншотов подбираются автоматически для оптимального заполнения

📊 Профессиональная информативность

• Детальные метаданные: Размер файла, разрешение видео, длительность
• Техническая информация: Размеры скриншотов, параметры сетки
• Временные метки: Точное позиционирование каждого кадра

🚀 Высокая производительность

• Быстрая обработка: Оптимизированный алгоритм захвата кадров
• Массовая генерация: До 100 кадров в одном скринлисте
• Прогресс-бар: Отображение процесса обработки в реальном времени
• Стабильность: Защита от ошибок и безопасная очистка памяти

🎨 Современный дизайн

• Responsive UI: Адаптация под любые экраны
• Интуитивный интерфейс: Простые и понятные элементы управления
• Плавные анимации: Современные переходы и эффекты

🎨 Кастомизация

Вы можете легко настроить:

• Цветовую схему в styles.css
• Диапазоны значений для слайдеров
• Размеры по умолчанию для всех параметров
• Качество выходных изображений (JPEG compression)
• Компоновку интерфейса и расположение элементов

� Технические характеристики

• Максимум кадров: 100 скриншотов в одном скринлисте
• Диапазон колонок: 3-10 для оптимальной компоновки
• Диапазон ширины: 800-1600px для различных применений
• Форматы экспорта: JPEG с настраиваемым качеством
• Минимальные отступы: 2px между скриншотами для максимальной плотности
• Автоматическое масштабирование: Сохранение пропорций при любых размерах

🔧 Установка и запуск

1. Скачайте все файлы проекта
2. Откройте index.html в современном браузере
3. Или разместите файлы на веб-сервере для доступа по сети

Никаких дополнительных зависимостей или установки не требуется!

� Системные требования

• Современный браузер с поддержкой:
  • HTML5 Video API
  • Canvas API
  • File API
  • ES6+ JavaScript
• Рекомендуемые браузеры:
  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

🎯 Области применения

• Создание превью для видеокаталогов
• Анализ фильмов и видеоконтента
• Документирование видеопроектов
• Веб-презентации видеоматериалов
• Архивирование видеоколлекций
• Образовательные материалы с видеоразбором

�📄 Лицензия

MIT License - используйте свободно для личных и коммерческих проектов.

🚀 Обновления в версии 2.0

• ✅ Увеличено количество кадров до 100
• ✅ Расширен выбор колонок (3-10)
• ✅ Добавлен контроль ширины скринлиста
• ✅ Оптимизировано использование пространства
• ✅ Улучшена информативность заголовков
• ✅ Исправлены ошибки и повышена стабильность
• ✅ Двухуровневое отображение (просмотр/экспорт)

🤝 Вклад в проект

Приветствуются предложения по улучшению и исправления ошибок! Создавайте Issues и Pull Requests для развития проекта.