Question

我在调整显示视频的画布时遇到了问题。调整大小后，它会在“之前”和“之后”窗口大小之间不断变换为不同的大小。

我尝试了this帖子的想法，这似乎让Chrome稍微平静下来，但对Firefox没有任何影响。

This other帖子给了我一些想法，但仍然没有解决它。好像我要么在循环中多次调用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>

Answer 1

随着上下文的变化，您似乎会锁定用于setTimeout函数的旧值，就像您在此处使用它一样。因此，当您重新调整循环大小时，仍会使用不再与新大小相对应的旧值，并导致视频在这些大小之间切换。

尝试更多地“全局化”值，以便在参数方面循环调用是干净的。这样您就可以确定变量包含每轮的正确值。

同时使用setTimeout更改requestAnimationFrame以使循环更低级别（高效）和流畅，因为它与监视器的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

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

1 个答案: