video screenshot

index.html

<div class="wrap">
  <video id="video" width="320" controls="true">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4">
    <!-- FireFox 3.5 -->
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4">
    <!-- WebKit -->
    Your browser does not support HTML5 video tag. Please download FireFox 3.5 or higher.
  </video>
  <br/>
  <button id="cit" onclick="shoot()" class="button">Capture</button>
  <br/>
  <div id="output"></div>
</div>

script.js

var videoId = 'video';
    var scaleFactor = 0.25;
    var snapshots = [];

    /**
     * Captures a image frame from the provided video element.
     *
     * @param {Video} video HTML5 video element from where the image frame will be captured.
     * @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
     *
     * @return {Canvas}
     */
    function capture(video, scaleFactor) {
        if (scaleFactor == null) {
            scaleFactor = 1;
        }
        var w = video.videoWidth * scaleFactor;
        var h = video.videoHeight * scaleFactor;
        var canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
        return canvas;
    }

    /**
     * Invokes the <code>capture</code> function and attaches the canvas element to the DOM.
     */
    function shoot() {
        var video = document.getElementById(videoId);
        var output = document.getElementById('output');
        var canvas = capture(video, scaleFactor);
        canvas.onclick = function() {
            window.open(this.toDataURL(image/jpg));
        };
        snapshots.unshift(canvas);
        output.innerHTML = '';
        for (var i = 0; i < 4; i++) {
            output.appendChild(snapshots[i]);
        }
    }

(function() {
  var captureit = document.getElementById('cit');
  captureit.click();
})();

scripts

<script src="https://raw.githubusercontent.com/X3TechnologyGroup/VideoFrame/master/VideoFrame.min.js"></script>

style.css

.wrap {
  border: solid 1px red;
  padding: 10px;
  text-align: center;
}

#output {
  display: inline-block;
  top: 4px;
  position: relative;
  border: dotted 1px #ccc;
  padding: 2px;
}

.button {
  border: solid 2px #ccc;
}

video-screenshot.markdown

video screenshot

A Pen by Reece Hart on CodePen.

License.