将视频和画布调整到最大尺寸

我必须在CANVAS中播放本地视频文件。 CANVAS在一个div中，它具有最大的宽度和高度。如果我尝试将视频和帆布的大小调整为该大小，而不是显示调整大小，则会裁剪视频。我怎样才能调整大小？将视频和画布调整到最大尺寸

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);

来源

2014-12-02 Raúl Gombru

你必须在> 848线'whidth'应该是'width'一个错字。不知道，如果这发生在你输入问题时，或者它是实际的代码。 – K3N 2014-12-02 11:19:16

Ups，是的，谢谢。不管怎样，这不是问题 – 2014-12-02 13:04:35

不幸的是（这是什么是videoInfo，你如何绘制框架，canvas元素在哪里，canvas是如何设置的）。你能设置一个演示你的场景的小提琴（或内联演示）吗？（我知道视频链接可能有点棘手，但有些开源视频可以用来替代实际的视频） – K3N 2014-12-02 14:26:58

我已经解决了！您需要使用新的视频尺寸画布绘制时，就像这样：

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

来源

2014-12-02 15:51:14

将视频和画布调整到最大尺寸

回答

相关问题