使用HTML5 Canvas从视频中捕获帧

Question

我试图从视频中捕获一个帧并使用HTML5将其绘制到画布，但下面的代码无法正常工作。当我使用.mp4格式的视频源并单击开始按钮时，画布将填充黑色。

但我可以获得'.ogv'格式视频源的正确捕捉图像。这是用于捕获帧的代码：

<script type="text/javascript">
    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());
        };
        snapshots.unshift(canvas);
        output.innerHTML = '';
        for(var i=0; i<4; i++){
            output.appendChild(snapshots[i]);
        }
    }
</script>