brew install ffmpeg $(brew options ffmpeg | grep -vE '\s' | grep -- '--with-' | tr '\n' ' ')
Cut video from 00:00:43 sec to 00:00:58 sec (15 sec duration).
Resize it to 720p.
Max quality options, but small size.
With audio:
ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf scale=-2:720 -b:v 2M -c:a libfdk_aac -b:a 128k -movflags +faststart dest.mp4
Without audio (preffered for video bg):
ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf scale=-2:720 -b:v 2M -an -movflags +faststart dest.mp4
You could try 2-pass:
ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf scale=-2:720 -b:v 2M -pass 1 -an -movflags +faststart -f mp4 /dev/null && ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf scale=-2:720 -b:v 2M -pass 2 -an -movflags +faststart dest.mp4
Facebook cover (2-pass):
ffmpeg -ss 00:00:00 -i source.mp4 -t 00:00:57 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf "scale=-1:462, crop=820:462" -b:v 2M -pass 1 -an -movflags +faststart -f mp4 /dev/null && ffmpeg -ss 00:00:00 -i source.mp4 -t 00:00:57 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf "scale=-1:462, crop=820:462" -b:v 2M -pass 2 -an -movflags +faststart dest.mp4
With audio:
ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libvpx -vf scale=-2:720 -crf 10 -b:v 2M -c:a libvorbis dest.webm
Without audio (preffered for video bg):
ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libvpx -vf scale=-2:720 -crf 10 -b:v 2M -an dest.webm
You should set -b:v 2M
for webm! Or your max bitrate will be low.
ffmpeg -i dest.mp4 -c copy -an dest-nosound.mp4
ffmpeg -i dest.webm -c copy -an dest-nosound.webm
ffmpeg -i dest.webm -ss 00:00:00.000 -vframes 1 video-bg.jpg
Video will not autostart without "muted" property in Chrome and also without "playsinline" on iOS!
<div class="header">
<div class="header__video">
<video class="video-bg" autoplay playsinline muted loop poster="img/video-bg.jpg">
<source src="video/intro.webm" type="video/webm">
<source src="video/intro.mp4" type="video/mp4">
</video>
</div>
</div>
.header {
position: relative;
height: 690px; // anything below 720 and more then 480 (you should resize to 480p if smaller)
}
.header__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
.video-bg {
opacity: .5;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
object-fit: cover;
object-position: center;
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
background-size: cover;
background: url("../img/video-bg.jpg") center center no-repeat;
}