标签：jquery javascript html5-canvas html5-video

我正在尝试捕获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,并且在提供的图像中,视频和画布标签的大小都是如此.我也尝试过不同尺寸的产品,结果仍然相同

编辑2：我尝试了多种格式/视频和操作系统,但仍有相同的问题,所以我不认为问题与任何编解码器问题有关,例如

解决方法:

好吧我不知道为什么这会对canvas元素产生任何影响但是为了工作我必须使用它的width / height属性设置画布的宽度和高度然后我可以随意更改画布的大小并且视频将填充画布区域.以下完整解决方案

$(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";

});

标签：jquery,javascript,html5-canvas,html5-video
来源： https://codeday.me/bug/20190529/1176846.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。