將視頻和畫布調整到最大尺寸

我必須在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

將視頻和畫布調整到最大尺寸

回答

相關問題