Show thumbnail image of video using jQuery-File-Upload

To show a thumbnail image of a video using jQuery File Upload, you need to use the FileReader API to read the video file, extract a frame as an image, and display it as a thumbnail. Here's how you can achieve this:

1. HTML Markup: Set up your HTML markup to include the file input element and a container to display the thumbnail.

   htmlCopy code
   <input type="file" name="video" id="video-input" accept="video/*">
   <div id="thumbnail-container"></div>
   

2. JavaScript: Use jQuery to handle the file input change event and read the video file using the FileReader API.

   javascriptCopy code
   $(function() {
       $("#video-input").on("change", function() {
           var file = this.files[0];
   
           if (file) {
               // Create a new FileReader
               var reader = new FileReader();
   
               // When the FileReader loads the file, extract the thumbnail and display it
               reader.onload = function(event) {
                   var videoUrl = event.target.result;
   
                   // Create a video element to extract a frame as a thumbnail
                   var videoElement = document.createElement("video");
                   videoElement.setAttribute("src", videoUrl);
   
                   // When the video metadata is loaded, seek to a specific time (e.g., 5 seconds)
                   // and extract the frame as an image
                   videoElement.addEventListener("loadedmetadata", function() {
                       this.currentTime = 5; // Seek to 5 seconds
                   });
   
                   // When the video frame is loaded, extract the frame as an image
                   videoElement.addEventListener("seeked", function() {
                       // Create a canvas to draw the video frame
                       var canvas = document.createElement("canvas");
                       canvas.width = this.videoWidth;
                       canvas.height = this.videoHeight;
   
                       var ctx = canvas.getContext("2d");
                       ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
   
                       // Get the thumbnail as a data URL
                       var thumbnailUrl = canvas.toDataURL();
   
                       // Display the thumbnail
                       $("#thumbnail-container").html('<img src="' + thumbnailUrl + '">');
                   });
   
                   // Load the video element
                   videoElement.load();
               };
   
               // Read the video file as a data URL
               reader.readAsDataURL(file);
           }
       });
   });
   

In this code, we use the FileReader API to read the selected video file as a data URL. Then, we create a video element and set its src attribute to the data URL. When the video metadata is loaded, we seek to a specific time (e.g., 5 seconds) and extract the frame as an image using a canvas element. Finally, we display the extracted frame as a thumbnail in the specified container.

Keep in mind that extracting a thumbnail from a video can take some time, depending on the size and length of the video. Additionally, video formats and codecs may behave differently across browsers. Therefore, you may need to handle different video formats and codecs accordingly.