0

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

我尝试了这个帖子的想法，这似乎让 Chrome 平静了一点，但对 Firefox 没有影响。

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

1 回答 1

0

随着上下文的变化，您似乎锁定了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

于 2013-07-21T03:25:41.840 回答