web front video
От Натальи
https://github.com/Natalia-Orlova
https://natalia-orlova.github.io/test_scroll/
без подключения библиотек, видео на десктопе скроллится плавно, на телефоне тормозит, пока не прогрузится видео, затем скроллится плавно. Если видео сжать для моб.версии, то при скролле перематывается со скачками, т.к., возможно, недостаточно кадров
https://natalia-orlova.github.io/scroll-test2/
с подключением библиотеки scrolly-video (видео бъётся на кадры и кадры отрисовываются в canvas), в Chrome canvas отрисовывается быстрее, в FireFox тормозит, даже если видео поместить не в начале, а ниже по странице. С телефона, при полной отрисовке, скроллится плавно и вперед, и назад
https://natalia-orlova.github.io/test-scroll3/
здесь видео изначально разбито на кадры, которые добавлены в папку imgs, и при скролле картинки подменяют друг друга, работает с телефона, в хроме, в firefox. по такому принципу сделано раскрытие устройства на minican 5 pro
---
# УСТАНОВКА FFMPEG
на Linux с помощью команды:
sudo apt install ffmpeg
на Windows
1 способ:
· Необходимо перейти на оф.сайт ffmpeg - https://ffmpeg.org/download.html#build-windows
· Выбрать одну из сборок
· В разделе release builds выбрать ffmpeg-release-essentials
· Распаковать архив, переименовать извлеченную папку в ffmpeg и поместить в корень диска C
· Добавить ffmpeg в переменные среды (1. Открываем переменные среды (Win+R → SystemPropertiesAdvanced или ПКМ по "Этот компьютер" в проводнике → "Свойства" → "Дополнительные параметры системы" → На вкладке "Дополнительно" внизу кликаем на "Переменные среды...") 2. В "Переменные среды пользователя..." находим "Path" → "Изменить..." → "Создать" → Вводим путь к ffmpeg.exe – C:\ffmpeg\bin)
2 способ:
1. Скачиваем ffmpeg во временную папку:
wget https://www.gyan.dev/ffmpeg/builds/ffmpeg-release-essentials.zip -outfile $Env:TEMP\ffmpeg.zip
Распаковка в "\AppData\Roaming\ffmpeg-5.0-essentials_build":
Expand-Archive -Path $Env:TEMP\ffmpeg.zip -DestinationPath $Env:USERPROFILE\AppData\Roaming\
Переименование папки "ffmpeg-5.0-essentials_build" в "ffmpeg":
Rename-Item -Path (Get-ChildItem -Path $Env:USERPROFILE\AppData\Roaming\ -Filter "ffmpeg-*").FullName -NewName "ffmpeg"
Удаляем скачанный архив:
Remove-Item -Path $Env:TEMP\ffmpeg.zip
Создание переменной среды для пользователя:
Вариант №1. Реестр
$oldpath = Get-ItemProperty -Path HKCU:\Environment -Name Path; $newpath = $oldpath.Path += ";%USERPROFILE%\AppData\Roaming\ffmpeg\bin"; Set-ItemProperty -Path HKCU:\Environment -Name Path -Value $newpath
Вариант №2. '.NET'
$oldpath = [Environment]::GetEnvironmentVariables('user').Path; $newpath = $oldpath + ";%USERPROFILE%\AppData\Roaming\ffmpeg\bin\"; [Environment]::SetEnvironmentVariable("PATH", $newpath, [System.EnvironmentVariableTarget]::User)
скрипт, который установит и пропишет путь в переменную path автоматически
ffmpeg_install.ps1
```
#Downloading ffmpeg
wget https://www.gyan.dev/ffmpeg/builds/ffmpeg-release-essentials.zip -outfile $Env:TEMP\ffmpeg.zip
#Unpacking ffmpeg
Expand-Archive -Path $Env:TEMP\ffmpeg.zip -DestinationPath $Env:USERPROFILE\AppData\Roaming\
Rename-Item -Path (Get-ChildItem -Path $Env:USERPROFILE\AppData\Roaming\ -Filter "ffmpeg-*").FullName -NewName "ffmpeg"
#Deleting unnecessary files
Remove-Item -Path $Env:TEMP\ffmpeg.zip
#Adding ffmpeg to the current user's environment variables
$oldpath = Get-ItemProperty -Path "HKCU:\Environment" -Name "Path"
$newpath = $oldpath.Path += ";%USERPROFILE%\AppData\Roaming\ffmpeg\bin"
Set-ItemProperty -Path "HKCU:\Environment" -Name "Path" -Value $newpath
Start-Process SystemPropertiesAdvanced
```
---
## Шаги для разбиения видео на кадры:
1. Установить пакет fluent-ffmpeg: npm install fluent-ffmpeg (ffmpeg должен быть уже установлен)
2. Создать скрипт node.js, пример:
```
const ffmpeg = require('fluent-ffmpeg');
const path = require('path');
const fs = require('fs');
// Указываем путь к FFmpeg
ffmpeg.setFfmpegPath('C:\\ffmpeg\\bin\\ffmpeg.exe');
ffmpeg.setFfprobePath('C:\\ffmpeg\\bin\\ffprobe.exe');
function extractFrames(videoPath, outputFolder) {
// Создаем папку для кадров, если она не существует
if (!fs.existsSync(outputFolder)) {
fs.mkdirSync(outputFolder);
}
// Конфигурируем ffmpeg
ffmpeg(videoPath)
// Извлекаем кадры с частотой fps кадров в секунду и высоким качеством ('-qscale:v', '2' чем выше цифра, тем хуже качество)
/**
.outputOptions('-vf', 'fps=10', '-qscale:v', '2')
.output(path.join(outputFolder, '%d.jpg')) //изображения именуются цифрами от 1
.on('end', () => {
console.log('Извлечение кадров завершено');
})
.on('error', (err) => {
console.error('Ошибка при извлечении кадров:', err);
})
.run();
}
// Пример использования
const videoPath = 'input_video.mp4';
const outputFolder = 'output_frames';
extractFrames(videoPath, outputFolder);
```
3. После запуска скрипта (node frames.js) указанное видео будет разбито на кадры, которые появятся в созданной папке output_frames
---
## Инструкция по использованию FFmpeg для конвертации видео в 30 кадров в секунду на Fedora Linux
### Установка FFmpeg
1. **Откройте терминал.**
2. **Установите FFmpeg:**
```bash
sudo dnf install ffmpeg
```
### Конвертация видео в 30 кадров в секунду
1. **Откройте терминал.**
2. **Перейдите в директорию с вашим видеофайлом:**
```bash
cd /путь/к/вашему/видеофайлу
```
3. **Используйте следующую команду для конвертации видео в 30 кадров в секунду:**
```bash
ffmpeg -i input_video.mp4 -vf "fps=30" output_video.mp4
```
Где:
- `input_video.mp4` — ваш исходный видеофайл.
- `output_video.mp4` — имя выходного файла.
### Пример
Предположим, у вас есть видеофайл `my_video.mp4` в домашней директории, и вы хотите создать новый файл с именем `my_video_30fps.mp4` с частотой 30 кадров в секунду.
1. **Откройте терминал.**
2. **Выполните команду:**
```bash
cd ~
ffmpeg -i my_video.mp4 -vf "fps=30" my_video_30fps.mp4
```
### Дополнительные параметры
- **Изменение кодека:**
Если вы хотите изменить кодек, используйте параметр `-c:v`:
```bash
ffmpeg -i input_video.mp4 -vf "fps=30" -c:v libx264 output_video.mp4
```
- **Сохранение аудио:**
Если вы хотите сохранить аудиопоток, используйте параметр `-c:a copy`:
```bash
ffmpeg -i input_video.mp4 -vf "fps=30" -c:v libx264 -c:a copy output_video.mp4
```
### Заключение
Теперь у вас есть видеофайл с частотой 30 кадров в секунду. Вы можете использовать FFmpeg для множества других задач, связанных с обработкой видео и аудио.