畫布上的視頻不斷調整大小

我無法調整顯示視頻的畫布大小。在調整大小之後，它會在「之前」和「之後」窗口大小之間不斷地變成不同的大小。畫布上的視頻不斷調整大小

我試過this帖子的主意，這似乎讓Chrome冷靜一點，但對Firefox沒有影響。

This other帖子給了我一些想法，但仍然沒有解決它。好像我要麼在循環中調用多次調整大小（我沒有看到），要麼畫布的上下文不知道如何解決最終大小。有任何想法嗎？

<!DOCTYPE html> 

<html> 
<head> 
    <title>overflow</title> 
<style> 
#c { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 
#hold { 
    position: fixed; 
} 

#v { 
    position: absolute; 
    height: auto; 
    width: 100%; 
    z-index: 0; 

} 
#see { 
    position: relative; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 2; 

} 
</style> 
</head> 

<body> 
<canvas id=c></canvas> 

<div id=hold> 
<video id=v> 
</video> 
</div> 

<canvas id=see></canvas> 


<script> 
window.onload = start; 

function start() { 

    var v = document.getElementById('v'); 
    var house = document.getElementById('hold'); 
    var base = document.getElementById('c'); 
    var canvas = base.getContext('2d'); 
    var cover = document.getElementById('see'); 
    var canvastwo = cover.getContext('2d'); 


    v.src=("keyed.ogv") 
    v.load(); 
    v.play(); 

    resize(); 

    function resize() { 
     var wth = (window.innerWidth * 0.65); 
     house.width = wth; 
     house.height = (wth * 9/16); 
     house.style.marginTop=((window.innerHeight/2) - (house.height/2) + "px"); 
     house.style.marginLeft=((window.innerWidth/2) - (house.width/2) + "px"); 
     cover.width = (wth/2); 
     cover.height = (house.height/2); 
     cover.style.marginTop=((window.innerHeight/2) - (cover.height/2) + "px"); 
     cover.style.marginLeft=((window.innerWidth/2) - (cover.width/2) + "px"); 
     var rw = cover.width; 
     var rh = cover.height; 

     canvastwo.clearRect(0, 0, rw, rh); 
     draw(v, canvastwo, rw, rh); 
    } 

    window.onresize = resize; 

function draw(o,j,w,h) { 
    if(v.paused || v.ended) return false; 
    j.drawImage(o,0,0,w,h); 
    setTimeout(draw,20,o,j,w,h); 
    } 

} 
</script> 
</body> 
</html>

來源

2013-07-20 subtle cinema

調整大小事件觸發多次，出於某種原因。即使我只顯式調用該函數並停止偵聽窗口大小，抖動仍然會發生。請注意，這只是畫布的行爲。如果我顯示視頻，我可以整天調整大小，沒有問題。 –

你似乎在你使用的setTimeout功能你在這裏使用的方式舊值鎖定，隨着環境的變化。因此，當您重新調整大小時，循環仍然使用不再與新尺寸對應的舊值，並導致視頻在這些尺寸之間切換。

試着更「全球化」這些值，以便循環調用在參數上是乾淨的。這樣你可以確定變量包含每一輪的正確值。

還改變setTimeout與使循環更低水平（高效）和流動，因爲這同步到顯示器的vblank差距。這對視頻特別重要，否則將會跳過幀，因爲setTimeout無法與監視器同步。

下面是你需要改變的基本代碼：

/// put these into you start block to keep them "global" 
/// for the functions within it. 
var w, h;

更改這一部分在resize功能：

/// ... 
w = cover.width; 
h = cover.height; 

canvastwo.clearRect(0, 0, w, h); 

/// argument free call to draw: 
draw();

最後的循環：

function draw() { 
    if(v.paused || v.ended) return false; 
    canvastwo.drawImage(v,0,0,w,h); 
    requestAnimationFrame(draw); 
}

這將刪除猛擊的視頻，並使更新與監視器同步視頻元素本身。

ONLINE DEMO

來源

2013-07-21 03:25:41 K3N

謝謝。我真的很感激jsfiddle！（下次我不需要那麼多修復。） –

畫布上的視頻不斷調整大小

回答

相關問題