将视频和画布调整为最大尺寸答案

【问题标题】：Resize video and canvas to a max size将视频和画布调整为最大尺寸
【发布时间】：2015-01-30 14:21:38
【问题描述】：

我必须在 CANVAS 中播放本地视频文件。 CANVAS 位于 div 内部，具有最大宽度和高度。如果我尝试将视频和 CANVAS 调整为该大小，而不是显示调整大小，视频将被裁剪。如何调整大小？

HTML

<div>
<video id="video" controls>
<source id="videoSource" type="video/ogg">
</video>
</div>

if (videoInfo.height > 480)    
    { 
        var AR = videoInfo.width/videoInfo.height;
        videoInfo.height = 480;
        videoInfo.width = 480*AR; 
    }

if (videoInfo.whidth > 848)  
{ 
    var AR = videoInfo.width/videoInfo.height;
    videoInfo.width = 848; 
    videoInfo.height = 848/AR;
}

video.setAttribute('width', videoInfo.width);
video.setAttribute('height', videoInfo.height + VIDEO_HEIGHT_SHIFT);

displayedCanvas.setAttribute('width', videoInfo.width);
displayedCanvas.setAttribute('height', videoInfo.height);

【问题讨论】：

您在 > 848 行有错字 whidth 应该是 width。不知道这是在您输入问题时发生的还是实际代码。
Ups，是的，谢谢。反正这不是问题
可惜这里的代码太少了（videoInfo是什么，怎么画框，canvas元素在哪里，canvas怎么设置..）。你能设置一个小提琴（或内联演示）来展示你的场景吗？（我知道视频链接可能有点棘手，但是您可以使用开源视频代替实际视频）

标签： javascript html canvas

【解决方案1】：

我已经解决了！在画布中绘制视频时需要使用新的视频尺寸，如下所示：

ctx.drawImage(video, 0, 0, videoInfo.width, videoInfo.height);

【讨论】：