Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

HTML5-JavaScript 기반 비디오 플레이어의 스냅샷을 찍는 방법은 무엇입니까?


다음 코드를 실행하여 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>