Video Thumbnails - Instead of MP4 thumbnail icon, show first frame of video as the thumbnail/preview

[wearereeds]

Display first video frame as thumbnail in assets directory / browser on video or thumbnail on assets field when a video is selected

[wsydney76]

Was approached about this, because I'm maintaining a private hobby project where images extracted from crazy art videos are used for <video poster="...">, for index pages and CP thumbnails (where hosting videos locally is ok):

I belive this requires video processing software to be installed on your server, which probably is almost never the case.

But if you have, you can achieve this:

• Add an Assset field to the video assets field layout and assign it as 'Use as thumbnail'
• In a custom module, create a service method (Example: https://gist.github.com/wsydney76/4596893e3477c0359bb414b72f24dd35 using FFMPEG, local filesystem only) that extracts an image file, creates an asset element and assigns it to the video asset.
• Call that method on the videos save event

Worth noting:

• Take a frame from some seconds into the video, there is a good chance that the first frame is just black or otherwise not representative.
• If it's still not usable, you can repace the image either manually, or implement an action in a custom controller that creates an image from an other time (could be a CLI command, we use an Ajax call on the frontend)
• A focal point may need to be set for use on index pages, the service method takes a guess for videos in portrait format, but you may need to adjust this manually.
• For now, the method saves the image alongside the video in the same directory, so you may want to add conditions like `kind = video/image' on relationship fields or element indexes.
• For our project this performs fast enough, but depending on your use case it may be better to defer this to a queue job.
• In DDEV, just add webimage_extra_packages: [ ffmpeg ] to .ddev/config.yaml to install FFMPEG.