How to take a snapshot of HTML5-JavaScript based video player?

Javascript Web Development Front End Scripts

You can try to run the following code to take a snapshot of HTML5-JavaScript-based video player −

Example

<html>
   <body>
      <video controls>
         <source src = "new.mp4" type = "video/mp4"></source>
      </video>
      <canvas id = "canvas" width = "600" height = "300"></canvas>
      <button id = "snap" onclick = "snap()">Snapshot</button>
      <script>
         var video = document.querySelector('video');
         var canvas = document.querySelector('canvas');
         var context = canvas.getContext('2d');
         var myWidth, myHeight, ratio;
         
         video.addEventListener('loadedmetadata', function() {
            ratio = video.videoWidth/video.videoHeight;
            myWidth = video.videoWidth-100;
            myHeight = parseInt(w/ratio,10);
            canvas.width = myWidth;
            canvas.height = myHeight;
         },false);
         function snap() {
            context.fillRect(0,0,myWidth,myHeight);
            context.drawImage(video,0,0,myWidth,myHeight);
         }
      </script>
   </body>
</html>

Ankith Reddy

Published on 06-Apr-2018 12:11:38

Previous Page Print Page