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

how to get thumbnail image from video file in javascript

Ahmed ElNawawy answered on September 10, 2021 Popularity 10/10 Helpfulness 4/10

answer how to get thumbnail image from video file in javascript

related how to create thumbnail image from video in javascript

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 file get image javascript video

Link to this answer
Share Copy Link

Contributed on Mar 17 2022

Ahmed ElNawawy

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

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

Link to this answer
Share Copy Link

Contributed on Sep 10 2021

Serhii

0 Answers Avg Quality 2/10

how to set thumbnail for videos in javascript

Comment

//and code
function capture(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}

Popularity 6/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript set

Link to this answer
Share Copy Link

Contributed on Oct 26 2022

Busy Bat

0 Answers Avg Quality 2/10

how to get thumbnail image from video file in javascript

Contents

More Related Answers

how to get thumbnail image from video file in javascript

Closely Related Answers

how to create thumbnail image from video in javascript

get thumbnail from video js

how to set thumbnail for videos in javascript

Grepper

Documentation

Social

Legal

Contact

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