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.

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

    $(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 =; // 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.

Have questions or queries?
Get in Touch