Question

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

HTML

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

JS

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

Answer 1

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

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

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

1 个答案: