About

Generate n numbers of Image thumbnails of a video file.

A full working `React.js` sample code is in `./example` folder.

code sandbox example

This package can be used with any JS framework or in vanila js.

Purpose?

This module will generate n numbers of image thumbnails of a given video file.

By default the thumbnail's file format will be the base64.

Usage

`generateVideoThumbnails(selectedFile, numberOfThumbnails)`

Async/Await (Typescript & ES7)

{ console.error(err); })">

generateVideoThumbnails(videoFile, numberOfThumbnails).then((thumbnailArray) => {
    // output will be arry of base64 Images
    // example - ["img1", "imgN"]

    // @todo - implement your logic here
}).catch((err) => {
    console.error(err);
})

Using promises and dynamic Import (Html5)

{ res.generateVideoThumbnails(videoFile, noThumb).then((thumbArray) => { thumbArray.map((item) => { // type of item is base64 image // @todo - your logic here }) }) }); ">

// please change the location of index.js as needed

import("./index.js").then((res) => {
    res.generateVideoThumbnails(videoFile, noThumb).then((thumbArray) => {
        thumbArray.map((item) => {
            // type of item is base64 image

            // @todo - your logic here
        })              
    })
});

Examples

From File Input

complete working example is in the index.html file or you can visit the demo link

{ res.importFileandPreview(e.target.files[0]).then((url) => { source.setAttribute('src', url); source.setAttribute('type', e.target.files[0]?.type); res.generateVideoThumbnails(e.target.files[0], 1).then((thumbnails) => { // video operations // video.setAttribute("poster", thumbnails[1]) // video.setAttribute("src", url) video.style.width = "auto"; video.style.height = "auto" video.style.transform = "scale(1)" }) // numberInput numberWrapper.style.display = "block"; buttonWrapper.style.display = "block"; video.style.transform = "scale(1)" video.innerHTML = ""; video.appendChild(source); }); }) } }); thumbButton.addEventListener("click", function () { thumbnaislWrapper.innerHTML = ""; loader.style.display = "block"; import("./index.js").then((res) => { res.generateVideoThumbnails(selectedFile, parseInt(numberInput.value)).then((thumbArray) => { let thumbnailsImg = thumbArray.map((item) => { let img = document.createElement('img'); img.src = item; img.alt = ""; img.style.width = "200px"; img.style.objectFit = "cover"; img.style.margin = "10px"; img.style.cursor = "pointer"; img.addEventListener("click", function () { video.setAttribute("poster", item); }) return img; }) thumbnaislWrapper.innerHTML = ""; loader.style.display = "none"; thumbnailsImg.forEach((item) => { thumbnaislWrapper.appendChild(item); }) }) }); }) ">

 let video = document.getElementById("video");
        let inputFile = document.getElementById("inputfile");
        let numberInput = document.getElementById("numberofthumbnails");
        let numberWrapper = document.getElementById("numberWrapper");
        let buttonWrapper = document.getElementById("buttonWrapper");
        let thumbButton = document.getElementById("generatethumbnails");
        let thumbnaislWrapper = document.getElementById("thumbnails");
        let loader = document.getElementById("loader");
        let selectedFile = "";

        inputFile.addEventListener("change", function (e) {
            if (e.target.files?.length) {
                selectedFile = e.target.files[0];

                var source = document.createElement('source');
                import("./index.js").then((res) => {
                    res.importFileandPreview(e.target.files[0]).then((url) => {

                        source.setAttribute('src', url);
                        source.setAttribute('type', e.target.files[0]?.type);

                        res.generateVideoThumbnails(e.target.files[0], 1).then((thumbnails) => {
                            // video operations
                            // video.setAttribute("poster", thumbnails[1])
                            // video.setAttribute("src", url)
                            video.style.width = "auto";
                            video.style.height = "auto"
                            video.style.transform = "scale(1)"
                        })
                        // numberInput
                        numberWrapper.style.display = "block";
                        buttonWrapper.style.display = "block";
                        video.style.transform = "scale(1)"
                        video.innerHTML = "";
                        video.appendChild(source);
                    });
                })
            }
        });
        thumbButton.addEventListener("click", function () {
            thumbnaislWrapper.innerHTML = "";
            loader.style.display = "block";
            import("./index.js").then((res) => {
                res.generateVideoThumbnails(selectedFile, parseInt(numberInput.value)).then((thumbArray) => {
                    let thumbnailsImg = thumbArray.map((item) => {
                        let img = document.createElement('img');
                        img.src = item;
                        img.alt = "";
                        img.style.width = "200px";
                        img.style.objectFit = "cover";
                        img.style.margin = "10px";
                        img.style.cursor = "pointer";
                        img.addEventListener("click", function () {
                            video.setAttribute("poster", item);
                        })
                        return img;
                    })
                    thumbnaislWrapper.innerHTML = "";
                    loader.style.display = "none";
                    thumbnailsImg.forEach((item) => {
                        thumbnaislWrapper.appendChild(item);
                    })
                })
            });

        })

Your contributions are more than welcome 😀

ROADMAP 🗺

Lib roubstness and accuracy increment.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Comments

New callback for async generation

Added new callback option that will be called at each thumb generated. This allow users to have large videos and large number of thumbs without breaking the UI.
feature

opened by quantodaniel 2
Generate thumbnails asynchronously.

Added a new callback option that will be called at each thumb generated. This allows users to have large videos and a large number of thumbs without breaking the UI.

async generation 4.webm
feature

opened by Rajesh-Royal 1
thumbnails not getting generated for videos created by iphone 12 or higher mobile devices

I have a case scenario in a website where i have to upload a video a get a thumbnail of that video , the library seems to work perfectly for the web as well as for video made by android devices . But for the videos created by iphone 11 pro, 11 proMax and 12 , and higher devices , black thumbnails are getting generated , couldn't seem to understand this issue , so creating this issue , I seem to have run out for options now. Please check this issue.

opened by techdevelopers08 1

Cannot generate thumbnails from a Url.

A user is not able to generate thumbnails from a video file URL.

Error:

Access to video at 'https://xyz.com/file_example_MP4_640_3MG.mp4' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Acceptance criteria It should generate thumbnails from a video file URL

bug

opened by Rajesh-Royal 0

Error: remove the loaders on error:

While generating thumbnails from a video file or from a URL if an error occurs to access the file or from a remote origin the loaders keep loading and the error state is not shown.

expected: The loaders should be replaced with the error details.

Preview:

bug

opened by Rajesh-Royal 0