我无法调整正在显示视频的画布的大小。调整大小后，它会连续不断地晃动到“之前”和“之后”窗口大小之间的不同大小。
我尝试了这篇文章的想法，这似乎使Chrome稍微平静了下来，但对Firefox没有影响。
另一篇文章给了我一些想法，但仍然没有解决。似乎我要在一个循环中多次调用resize（我看不到），或者画布的上下文不知道如何确定最终的尺寸。有任何想法吗？
<!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>
setTimeout随着上下文的变化，您似乎像在这里使用函数一样锁定了函数使用的旧值。因此，当您调整大小时，循环仍会使用不再与新大小对应的旧值，并导致这些大小之间的视频切换。
尝试更多地“全局化”值，以使循环调用在涉及参数时是干净的。这样，您可以确保变量在每个回合中都包含正确的值。
还要更改setTimeout与的值，requestAnimationFrame以使环路更低电平（更有效），并使之更流畅，因为这与监视器的空白间隙同步。这对于视频尤为重要，因为否则视频将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);
}
这将删除抽搐的视频，并像视频元素本身一样将更新同步到监视器。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句