nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN

    @rajesh896/video-thumbnails-generator
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.9 • Public • Published

    The smallest library to generate video thumbnails on client side.

    About

    Generate n numbers of Image thumbnails of a video file.

    !Live Demo


    code sandbox example

    https://user-images.githubusercontent.com/24524924/160228836-547316dc-9ec0-4eca-aed1-09127db5de69.mp4

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

    NPM

    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)

    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)

    // 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

     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 🗺

    1. Lib roubstness and accuracy increment.

    License

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

    Install

    npm i @rajesh896/video-thumbnails-generator

    DownloadsWeekly Downloads

    1,333

    Version

    2.3.9

    License

    MIT

    Unpacked Size

    3.68 MB

    Total Files

    40

    Last publish

    Collaborators

    • rajesh896