5

我正在尝试捕获 html5 视频的帧以创建它的缩略图，但是当图像渲染到画布时我看到了一些奇怪的结果。

我看到的是画布中显示的图像只是放大了很多的视频的一部分！如下图所示：

画布中的错误比例

代码也非常简单：

$(document).ready(function(){
    var $Body = $("body");

    var $Video = $("<video>").appendTo($Body);
    var cVideo = $Video.get(0);

    cVideo.addEventListener("loadedmetadata", function(){
        cVideo.addEventListener("seeked", function(){
            var $Canvas = $("<canvas>").width(cVideo.videoWidth).height(cVideo.videoHeight);
            $Canvas.appendTo($Body);
            var cCtx = $Canvas.get(0).getContext("2d");
            cCtx.drawImage(cVideo, 0, 0);
        }, false);
        cVideo.currentTime = 500;
    }, false);
    cVideo.src = "movie.mkv";
});

我尝试了许多宽度/高度/剪切区域等的组合，但我所能实现的只是查看原始视频右上角的不同版本。

编辑：我会宣传原始视频大小为 1920 x 800，并且在提供的图像中是视频和画布标签的大小。我也试过不同尺寸的，结果还是一样

Edit2：我尝试了多种格式/视频和操作系统，但仍然有同样的问题，所以我不认为该问题与任何编解码器问题有关

4

1 回答 1

11

好的，我不知道为什么这对画布元素有任何影响，但为了使其工作，我必须使用其宽度/高度属性设置画布的宽度和高度，然后我可以随意更改画布的大小并且视频会填满画布的区域。完整解决方案如下：

$(document).ready(function(){
var $Body = $("body");

var $Video = $("<video>").appendTo($Body);
var cVideo = $Video.get(0);

cVideo.addEventListener("loadedmetadata", function(){
    cVideo.addEventListener("seeked", function(){
        var $Canvas = $("<canvas>").attr("width", cVideo.videoWidth).attr("height", cVideo.videoHeight);
        $Canvas.appendTo($Body);
        var cCtx = $Canvas.get(0).getContext("2d");
        cCtx.drawImage(cVideo, 0, 0, cVideo.videoWidth, cVideo.videoHeight);
    }, false);
    cVideo.currentTime = 500;
}, false);
cVideo.src = "movie.mkv";

});

于 2013-09-07T19:32:35.503 回答