Generate Video Thumbnails Using Vanilla JavaScript

Preview:

Description:

A JavaScript-powered video thumbnail generator that allows you to generate x number of thumbnails from any HTML5 video you provide.

One of the most common problems I, and many web designers, the face is dealing with video players and a new challenge – creating a set of thumbnails for videos.

This can be especially cumbersome if you are interested in making sure that all media is protected and you cannot use any third-party software.

That is why I’d like to share you with the script that generates thumbnails dynamically using plain HTML5 and JavaScript.

See It In Action:

How to use it:

1. Import the main script index.js into the document.

<script src="./index.js"></script>

2. Create two buttons which allows the user to select video files from your computer or a remote URL.

<div id="selectbuttons">
  <button id="filebtn" class="btn">From File</button>
  <button id="urlbtn" class="btn">From Url</button>
</div>

3. The main HTML for the video thumbnail generator.

<div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
  <video poster="" style="max-width: 600px; max-height: 400px; transform: scale(0); transition: all 0.3s;" controls id="video">
    Your browser does not support the video tag.
  </video>
  <div style="display: none; margin-top: 25px;" id="fileControls">
    <input type="file" id="inputfile" class="custom-file-input" accept="video/*" />
    <input type="url" id="videoUrl" placeholder="Enter the url of video" style="width: 300px; height: 30px" />
    <div id="numberWrapper" style="display: none;">
      <label for="numberofthumbnails" style="margin-left: 15px;">Enter number of thumbnails to generate
      </label>
      <input type="number" id="numberofthumbnails" />
    </div>
  </div>
  <div style="margin-top: 25px; display: none;" id="buttonWrapper">
    <button id="generatethumbnails">Generate Thumbnails</button>
  </div>
  <div style="margin-top: 25px; display: none;" id="urlbuttonwrapper">
    <button id="generatethumbnails">Generate Thumbnails from url</button>
  </div>
</div>
<div id="loader" style="display: none; text-align: center;">
  <img src="https://i.giphy.com/media/l3nWhI38IWDofyDrW/giphy.webp" alt="">
</div>
<div id="thumbnails" style="display: flex; justify-content: center;flex-wrap: wrap; align-items: center; transition: all 0.3s;">
</div>

4. Activate the video thumbnail generator.

let video = document.getElementById("video");
let inputFile = document.getElementById("inputfile");
let videoUrl = document.getElementById("videoUrl");
let numberInput = document.getElementById("numberofthumbnails");
let numberWrapper = document.getElementById("numberWrapper");
let fileControls = document.getElementById("fileControls");
let buttonWrapper = document.getElementById("buttonWrapper");
let urlbuttonwrapper = document.getElementById("urlbuttonwrapper");
let thumbButton = document.getElementById("generatethumbnails");
let thumbnaislWrapper = document.getElementById("thumbnails");
let loader = document.getElementById("loader");
let selectbuttons = document.getElementById("selectbuttons");
let urlbtn = document.getElementById("urlbtn");
let filebtn = document.getElementById("filebtn");
let selectedFile = "";
urlbtn.addEventListener("click", function() {
  selectbuttons.style.display = "none";
  inputFile.style.display = "none";
  fileControls.style.display = "flex";
  numberWrapper.style.display = "block"
  urlbuttonwrapper.style.display = "block"
});
filebtn.addEventListener("click", function() {
  selectbuttons.style.display = "none";
  fileControls.style.display = "flex";
  videoUrl.style.display = "none"
});
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);
      })
    })
  });
})
// generate thumbnails from url
urlbuttonwrapper.addEventListener("click", function() {
  thumbnaislWrapper.innerHTML = "";
  loader.style.display = "block";
  video.style.width = "auto";
  video.style.height = "auto"
  video.style.transform = "scale(1)";
  video.setAttribute("src", videoUrl.value);
  import("./index.js").then((res) => {
    res.generateVideoThumbnails(videoUrl.value, parseInt(numberInput.value), type = "url").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);
      })
    }).catch((err) => {
      thumbnaislWrapper.innerHTML = "";
      loader.style.display = "none";
      let p = document.createElement("p")
      p.innerHTML = JSON.stringify(err);
      thumbnaislWrapper.appendChild(p);
    })
  });
});