Breaking News: Grepper is joining You.com. Read the official announcement!

get thumbnail from video js

Add Answer

Serhii answered on September 10, 2021 Popularity 9/10 Helpfulness 4/10

answer get thumbnail from video js

related how to create thumbnail image from video in javascript

related how to get thumbnail image from video file in javascript

get thumbnail from video js

Comment

function getVideoCover(file, seekTo = 0.0) {
    console.log("getting video cover for file: ", file);
    return new Promise((resolve, reject) => {
        // load the file to a video player
        const videoPlayer = document.createElement('video');
        videoPlayer.setAttribute('src', URL.createObjectURL(file));
        videoPlayer.load();
        videoPlayer.addEventListener('error', (ex) => {
            reject("error when loading video file", ex);
        });
        // load metadata of the video to get video duration and dimensions
        videoPlayer.addEventListener('loadedmetadata', () => {
            // seek to user defined timestamp (in seconds) if possible
            if (videoPlayer.duration < seekTo) {
                reject("video is too short.");
                return;
            }
            // delay seeking or else 'seeked' event won't fire on Safari
            setTimeout(() => {
              videoPlayer.currentTime = seekTo;
            }, 200);
            // extract video thumbnail once seeking is complete
            videoPlayer.addEventListener('seeked', () => {
                console.log('video is now paused at %ss.', seekTo);
                // define a canvas to have the same dimension as the video
                const canvas = document.createElement("canvas");
                canvas.width = videoPlayer.videoWidth;
                canvas.height = videoPlayer.videoHeight;
                // draw the video frame to canvas
                const ctx = canvas.getContext("2d");
                ctx.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);
                // return the canvas image as a blob
                ctx.canvas.toBlob(
                    blob => {
                        resolve(blob);
                    },
                    "image/jpeg",
                    0.75 /* quality */
                );
            });
        });
    });
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: get javascript video

Link to this answer
Share Copy Link

Contributed on Sep 10 2021

Serhii

0 Answers Avg Quality 2/10

Closely Related Answers

how to create thumbnail image from video in javascript

Comment

//Function to generate video thumbnail
const generateVideoThumbnail = (file) => {
    return new Promise((resolve) => {
      const canvas = document.createElement("canvas");
      const video = document.createElement("video");
  
      // this is important
      video.autoplay = true;
      video.muted = true;
      video.src = URL.createObjectURL(file);
  
      video.onloadeddata = () => {
        let ctx = canvas.getContext("2d");
  
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
  
        ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
        video.pause();
        return resolve(canvas.toDataURL("image/png"));
      };
    });
  };

//using function
const getVideoTb = async() => {
  const thumbnail =  await generateVideoThumbnail(item.file);
      console.log(thumbnail)
}

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: image imag

Link to this answer
Share Copy Link

Contributed on May 31 2022

Collins Rollins

0 Answers Avg Quality 2/10

how to get thumbnail image from video file in javascript

Comment

this answer is awesome:

https://stackoverflow.com/questions/23640869/create-thumbnail-from-video-file-via-file-input

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: capture

Link to this answer
Share Copy Link

Contributed on Mar 17 2022

Ahmed ElNawawy

0 Answers Avg Quality 2/10

get thumbnail from video js

Contents

More Related Answers

get thumbnail from video js

Closely Related Answers

how to create thumbnail image from video in javascript

how to get thumbnail image from video file in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.