0

ビデオを表示しているこのキャンバスのサイズを変更できません。サイズ変更後、「前」と「後」のウィンドウサイズの間でさまざまなサイズに絶えずジャークします。

この投稿のアイデアを試してみたところ、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>
4

1 に答える 1