Support videos

[pR0Ps]

Ideally, the thumbnails would be small, looping video previews that would auto-play (no sound).

All-in-one

Simultaneously generate:

• a 480px on the short side video with AAC sound @ 160KB/s (the video to display)
• a 150px*150px (scale to 150px short size, crop edges off) video with no audio, using the first 6 seconds at 2x speed (the thumbnail)

  ffmpeg -y -i "input.file" \
      -filter_complex "\
              [0:v] split=2 [in1][in2]; \
              [in1] scale='if(gt(iw, ih),-2,min(iw+mod(iw,2),480))':'if(gt(iw,ih),min(ih+mod(ih,2),480),-2)':flags=bicubic [out1]; \
              [in2] scale='if(gt(iw, ih),-2,min(iw+mod(iw,2),150))':'if(gt(iw,ih),min(ih+mod(ih,2),150),-2)':flags=bicubic, crop=150:150, setpts=0.5*PTS [out2] \
      " \
      -map '[out1]' -c:v libx264 -preset slow -crf 25 -map 0:a -c:a aac -b:a 160k -f mp4 display.mp4 \
      -map '[out2]' -t 3 -c:v libx264 -preset slow -crf 30 -f mp4 thumb.mp4

  Notes:

  • The if(gt(iw,ih), x, y) pattern is to ensure that it will never upscale a video.
  • The x+mod(x,2) pattern is so the dimensions will always be divisible by 2 (required for h.264).
  • Using -2 for the scale means that when scaling based on the other dimension it will only pick a value divisible by 2 (required for h.264)

---

Gif

I messed around with creating short preview gifs and ended up with this: ffmpeg -y -ss 10 -t 3 -i input.mp4 -vf "scale=(iw*sar)*max(150/(iw*sar)\,150/ih):ih*max(150/(iw*sar)\,150/ih), crop=150:150" -r 10 -f image2pipe -vcodec ppm - | convert -delay 5 -loop 0 - gif:- | convert -layers Optimize - output.gif

The files it generates are a bit big (this one is 656KB) but could maybe be shrunk down to something more acceptable by reducing the framerate or the number of colors.

mp4 (h.264)

Support for the <video> tag and efficient h.264 decoding is pretty common these days.

On the same test file (3 seconds original video, speed x2, 30fps): ffmpeg -y -ss 10 -t 3 -i 2017-05-02\ Wet\ path.mp4 -an -vf "scale=(iw*sar)*max(150/(iw*sar)\,150/ih):ih*max(150/(iw*sar)\,150/ih), crop=150:150, setpts=0.5*PTS" -c:v libx264 -preset veryslow -r 30 output.mp4

Size is 72kb.

webm (vp9)

Unfortunately webm support is a bit lacking, even on modern machines with modern browsers. That being said, the compression is much better than h.264.

On the same test file (3 seconds original video, speed x2, 30fps): ffmpeg -y -ss 10 -t 3 -i 2017-05-02\ Wet\ path.mp4 -an -vf "scale=(iw*sar)*max(150/(iw*sar)\,150/ih):ih*max(150/(iw*sar)\,150/ih), crop=150:150, setpts=0.5*PTS" -c:v libvpx-vp9 -deadline best -r 30 output.webm

Size is 44kb.

general

With both mp4 and webm, two-pass mode can be used for better quality at a set bitrate. Also, for quality-limited encoding, the -crf, -maxrate and -bufsize params can be tweaked for the best size/quality tradeoff.

At the cost of more up-front scanning time and a little more complexity in the viewer, multiple formats could be pre-generated. This would allow the browser to fall back from the best video option, all the way back to just a still image.

Links

• https://trac.ffmpeg.org/wiki/Encode/H.264
• https://caniuse.com/#search=h264
• https://trac.ffmpeg.org/wiki/Encode/VP9
• https://caniuse.com/#search=vp9
• https://en.wikipedia.org/wiki/HTML5_video#Multiple_sources
• https://helgeklein.com/blog/2017/12/browser-video-codecs-formats-hardware-acceleration/

[mremallin]

Possible way to grab a preview frame: https://stackoverflow.com/questions/27568254/how-to-extract-1-screenshot-for-a-video-with-ffmpeg-at-a-given-time

[sec]

Hi, Was this feature completed? It would be nice to have video preview (or even static image with video icon) + playback - I saw some forks that added support for that (using HTML5 video playbac) - but those were still using Python 2.x :/

[pR0Ps]

I did have a mostly-working prototype. I think I abandoned it because I hit an issue with Safari and got a bit fed up with it but it's been a while so I don't remember exactly.

I've just pushed what I had to the feature/video branch, hopefully it's of some use to you!