html5 视频截图

jquery.js

    <video src="../source/video.mp4" controls autoplay></video>  
    <button class="cut">点击截屏</button>  
    <canvas></canvas>    
<script>    
    ;$(function() {  
  
        var $canvas = $('canvas');  
        var $video = $('video');  
  
        $canvas.attr({  
            width: $video.width(),  
            height: $video.height(),  
        });  
        $video[0].onloadstart = function(e) {  
            console.log(e.srcElement.videoWidth);  
            console.log(this.videoWidth);  
        }  
        var ctx = $canvas[0].getContext('2d');  
        $('.cut').on('click', function() {  
            console.log('稍等，正在输出base64...');  
            var w = $video[0].videoWidth;//视频原有尺寸  
            var h = $video[0].videoHeight;//视频原有尺寸  
  
            $canvas.attr({  
                width: w,  
                height: h,  
            });  
  
            ctx.drawImage($video[0], 0, 0, w, h);  
            var base64 = $canvas[0].toDataURL('images/png');  
            console.log(base64);  
        });  
    
    
    });    
</script>