จับภาพหน้าจอจากวิดีโอเพลเยอร์ 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(myWidth / 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>