Create a video thumbnail

This example shows how to add custom controls to the trim plugin to capture a video thumbnail.

let currentThumbnailURL = undefined;

// creates a new thumbnail and returns the object url of the created file object
const createThumbnail = (editor) =>
    new Promise((resolve) => {
        processDefaultImage(editor.imageFile, {
            // we use current state
            ...editor.imageState,

            // so we create a small thumbnail
            imageWriter: {
                targetSize: {
                    width: 100,
                },
            },
        }).then(({ dest }) => {
            // set as new preview thumbnail
            const thumbnailURL = URL.createObjectURL(dest);
            resolve(thumbnailURL);
        });
    });

// creates an editor instance
const editor = openDefaultEditor({
    src: 'my-video.mp4',

    // add custom controls to the trim util
    trimWillRenderControls: (controls, env, redraw) => {
        // we add the video thumbnail button
        controls.push([
            'Button',
            'video-thumbnail',
            {
                label: 'Create thumbnail',
                onclick: () => {
                    // we remember timestamp for this thumbnail so we can create full size thumbnail when done
                    editor.imageMetadata = {
                        thumbnail: editor.imageCurrentTime,
                    };

                    // we generate a temporary thumbnail for display purposes
                    createThumbnail(editor).then((newThumbnailURL) => {
                        // if already generated a thumbnail, revoke the URL so we free up memory
                        if (currentThumbnailURL) {
                            URL.revokeObjectURL(currentThumbnailURL);
                            currentThumbnailURL = undefined;
                        }

                        // set new thumbnail
                        currentThumbnailURL = newThumbnailURL;

                        // triggers redraw of the trim util
                        redraw();
                    });
                },
            },
        ]);

        // we add the preview thumbnail if it's set
        if (currentThumbnailURL) {
            controls.push([
                'div',
                'thumbnail',
                {
                    innerHTML: `<img src="${currentThumbnailURL}" alt=""/>`,
                },
            ]);
        }

        return controls;
    },
});

editor.on('process', async (res) => {
    const { src, imageState, dest } = res;

    // add video to page
    const video = document.createElement('video');
    video.src = URL.createObjectURL(dest);
    video.autoplay = false;
    video.controls = true;
    document.body.append(video);

    // process the video source to create a full size thumbnail
    processDefaultImage(src, {
        ...imageState,
        currentTime: imageState.metadata.thumbnail,
    }).then((res) => {
        // add thumbnail to page
        const image = document.createElement('img');
        image.src = URL.createObjectURL(res.dest);
        document.body.append(image);
    });
});