Uppy: Video thumbnails

[JetsonDavis]

Hi,

I am using Uppy to upload video files (.mp4, .m4v, .mov, etc) and would like to make client-side thumbnails. I found a great JS lib called scrmhub (https://github.com/SCRMHub/clientside-video-thumbnails). Wondering if anyone has done an integration and/or used Uppy with SCRM?

This would be a great feature to include in Uppy!

Thx

[arturi]

Hi! We had a few people asking for video thumbnails, and we’d want to have them, but I’m not sure bundling that functionality into our @uppy/thumbnail-generator is the way to do it.

Having it as a separate plugin, especially in the user land for a start, would be great. So if you’d like to take a stab on this, and try to integrate Uppy with SCRM, here is an example of a custom plugin (and docs too): https://uppy.io/docs/writing-plugins/#Example-of-a-custom-plugin. And we also have a page with community projects, where we’d also list yours: https://uppy.io/docs/community-projects/.

[vietnguyen09]

For anyone who has related question, my code is not a plugin, just a trick and it works for me.
Use scrmhub (https://github.com/SCRMHub/clientside-video-thumbnails) library, thanks to @JetsonDavis for suggestion in using this.

.on('file-added', (file) => {
    if(file.type.includes('video'))
    {
        const thumbnailCount = 1;
        const thumbnails = new VideoThumbnails({
            count : thumbnailCount,
            maxWidth : 400,
            maxHeight : 400
        });
        //Captured a thumb
        thumbnails.on('capture', function(image) {
            let videoId = file.id.split('/').slice(-1).pop();
            $('li[id*="' + videoId + '"]')
                .find('.uppy-DashboardItem-previewInnerWrap')
                .html('<img class="uppy-DashboardItem-previewImg" src="'+image+'"/>');
        });
        thumbnails.capture(file.data);
    }
})