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

js html code to create video thumbnails

HxnRxa answered on May 16, 2023 Popularity 3/10 Helpfulness 1/10

answer js html code to create video thumbnails

js html code to create video thumbnails

Comment

<!DOCTYPE html>
<html>
<head>
  <title>Video Frame Capture</title>
  <style>
    video {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <h1>Video Frame Capture</h1>
  <input type="file" id="videoInput" accept="video/*">
  <br>
  <video id="myVideo" style="position:absolute;top:0;visibility:hidden;" controls></video>
  <canvas id="frameCanvas" style="display: none;"></canvas>
  <canvas id="frameCanvas2" style="display: none;"></canvas>
  
  <h2>Frame</h2>
  <img id="frame" alt="Frame" />
   <img id="frame2" alt="Frame" />
  

  <script>
    function createFrame(elm,video,reqWidth=100) {
      var canvas = document.createElement("canvas");
      var canvas2 = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      
      let ratio = video.videoWidth/video.videoHeight;
      
      let width = reqWidth;
      let height = reqWidth / ratio;
      
      ctx.drawImage(video,0,0,width, height);
      var dataURL = canvas.toDataURL("image/webp");
      
      var ctx2 = canvas2.getContext("2d");
  	  var image = new Image();
  		image.onload = function() {
    	ctx2.drawImage(image, 0, 0, width, height, 0, 0, width, height);
        elm.src = canvas2.toDataURL("image/png");
  	   };
       image.src = dataURL;
    }

    function handleVideoSelect(event) {
      var video = document.getElementById("myVideo");
      var file = event.target.files[0];
      var fileURL = URL.createObjectURL(file);
      video.src = fileURL;

      video.onloadedmetadata = function() {
      setTimeout(()=>{
        createFrame(document.getElementById("frame"),video);
        createFrame(document.getElementById("frame2"),video,200);
        },1000);
      };
    }

    document.getElementById("videoInput").addEventListener("change", handleVideoSelect);
  </script>
</body>
</html>

Popularity 3/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: html video-thumbnails

Link to this answer
Share Copy Link

Contributed on May 16 2023

HxnRxa

0 Answers Avg Quality 2/10

js html code to create video thumbnails

Contents

More Related Answers

js html code to create video thumbnails

Grepper

Documentation

Social

Legal

Contact

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