如何拍摄基于 HTML5-JavaScript 的视频播放器的快照？

Z时代
2024-01-10
分类：综合

您可以尝试运行以下代码来拍摄基于 HTML5-JavaScript 的视频播放器的快照 -

示例

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