Fatal编程技术网
  • javascript/
  • Javascript 画布上的视频不断调整大小

Javascript 画布上的视频不断调整大小

javascript html video canvas

Javascript 画布上的视频不断调整大小,javascript,html,video,canvas,window-resize,Javascript,Html,Video,Canvas,Window Resize,我无法调整显示视频的画布的大小。调整大小后，它会不断地在“之前”和“之后”窗口大小之间切换到不同的大小 我尝试了波斯特的想法，这似乎让Chrome平静了一点，但对Firefox没有影响 波斯特给了我一些想法，但仍然没有解决。看起来我要么在循环中多次调用resize（我没有看到），要么画布的上下文不知道如何确定最终的大小。有什么想法吗 <!DOCTYPE html> <html> <head> <title>overflow</tit

我无法调整显示视频的画布的大小。调整大小后，它会不断地在“之前”和“之后”窗口大小之间切换到不同的大小

我尝试了波斯特的想法，这似乎让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>


溢流
#c{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
宽度：100%；
身高：100%；
z指数：1；
}
#持有{
位置：固定；
}
#五{
位置：绝对位置；
高度：自动；
宽度：100%；
z指数：0；
}
#看{
位置：相对位置；
排名：0；
底部：0；
左：0；
右：0；
z指数：2；
}
window.onload=开始；
函数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、 加载（）；
v、 play（）；
调整大小（）；
函数resize（）{
var wth=（window.innerWidth*0.65）；
house.width=wth；
房屋高度=（宽*9/16）；
house.style.marginTop=（（window.innerHeight/2）-（house.height/2）+“px”）；
house.style.marginLeft=（（window.innerWidth/2）-（house.width/2）+“px”）；
覆盖层宽度=（宽度/2）；
封面高度=（房屋高度/2）；
cover.style.marginTop=（（window.innerHeight/2）-（cover.height/2）+“px”）；
cover.style.marginLeft=（（window.innerWidth/2）-（cover.width/2）+“px”）；
var rw=覆盖层宽度；
var rh=盖板高度；
canvastwo.clearRect（0，0，rw，rh）；
图纸（v、canvastwo、rw、rh）；
}
window.onresize=调整大小；
功能图（o、j、w、h）{
如果（暂停| |结束）返回false；
j、 绘图图像（o，0，0，w，h）；
设置超时（绘图，20，o，j，w，h）；
}
}
随着上下文的变化，您似乎将
设置超时
函数使用的旧值锁定在此处使用的方式中。因此，当您重新调整大小时，循环仍然使用旧值，而旧值不再与新大小对应，并导致视频在这些大小之间切换

尝试更多地“全球化”值，以便在涉及参数时循环调用是干净的。通过这种方式，您可以确保变量包含每轮的正确值

还可以使用
requestAnimationFrame
更改
setTimeout
，以使循环在与监视器的vblank间隙同步时更低级（高效）和流畅。这对于视频尤其重要，否则会跳过帧，因为
setTimeout
无法与监视器同步

以下是您需要更改的基本代码：

/// put these into you start block to keep them "global"
/// for the functions within it.
var w, h;
在
调整大小
功能中更改此部分：

/// ...
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);
}
这将删除抖动视频，并使更新与监视器同步，就像视频元素本身一样

由于某些原因，resize事件会触发多次。即使我只显式调用函数并停止侦听窗口大小调整，抖动仍然会发生。请注意，这只是画布的行为。如果我显示视频，我可以整天调整大小，没有问题。谢谢。我也真的很感激JSFIDLE！（下次我不需要那么多修理。）