04.10.21
Gemini version available ♊︎Self-Hosting Videos With Free Formats and Animated Previews, Watermarks/Logos and Translucency
Summary: We examine the power of video editing with ffmpeg, chained with command-line scripting and HTML5 features
The Web is a powerful platform — to the point where it’s a little ‘too’ powerful if put in the hands of malicious actors. But we’re still using the Web by default; it’s just what most people use. Video functionality on the Web improved a lot over the years, putting aside DRM/EME. So let’s explore what we can accomplish with some command-line scripting and ffmpeg.
We’re always trying to encourage digital autonomy, which is why we adopt self-hosting whenever possible. This includes videos. For the sake of example, in this post we use an old video about Gemini proxies. It was picked at random, no special reason at all. None.
Extracting bits of the video with ffmpeg isn’t hard (check the official ffmpeg Web site; their documentation explains the pertinent options, which should be changed depending on the video):
ffmpeg -ss 600 -t 5 -i gemini-proxies.webm -vf "select=not(mod(n\,1)),fps=10,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" -loop 0 roy-talks.gif
This gets us started:
To add the resultant preview (known as “poster”) to the video, consider using the following, based on the above example: poster="http://techrights.org/wp-content/uploads/2021/04/roy-talks.gif"
This attribute belongs in the <video> element as it is part of the standard.
Add the watermark/logo with ffmpeg:
ffmpeg -i roy-talks.gif -i mogz-video-poster-4-small.png -filter_complex "overlay=0:H-h--1" -codec:a copy roy-talks2.gif
We use artwork prepared by Mogz for us.
These two passes may be lossy and maybe possible to combine rather easily, but splitting it into two stages aids simplicity. Here it goes:
For center: overlay=(W-w)/2:(H-h)/2
Top left (with 5 pixels of padding): overlay=5:5
Top right: overlay=W-w-5:5
Bottom right: overlay=W-w-5:H-h-5
Bottom left: overlay=5:H-h-5
With improved quality and translucency:
ffmpeg -i roy-talks.gif -i mogz-video-poster-4-small.png -filter_complex "[1]format=rgba,colorchannelmixer=aa=0.7[logo];[0][logo]overlay=0:H-h--1:format=auto" -codec:a copy roy-talks2.gif
The above scripts are possible to chain together and variables can be used, too. Let’s change the time to one minute from the start (-ss 60) for a duration of 2 seconds (-t 2):
VIDEO_FILE='gemini-proxies'
ffmpeg -ss 60 -t 2 -i $VIDEO_FILE.webm -vf "select=not(mod(n\,1)),fps=10,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" -loop 0 intermediate.gif
ffmpeg -i intermediate.gif -i mogz-video-poster-4-small.png -filter_complex "[1]format=rgba,colorchannelmixer=aa=0.7[logo];[0][logo]overlay=0:H-h--1:format=auto" -codec:a copy $VIDEO_FILE.gif
Of course it is also possible to use loops and batch-process many files in this way. Welcome to the power of GNU/Linux.
Voila. The translucency is easier to see because of the mug of coffee. █
ᶃ Gemini Space
This post is also available in 
Content is available under CC-BY-SA