캔버스에있는 비디오의 크기가 계속 조절됩니다.

비디오를 표시하는이 캔버스의 크기를 조정하는 데 문제가 있습니다. 크기를 조정 한 후에는 "이전"및 "이후"창 크기 사이에서 계속해서 서로 다른 크기로 움직입니다.캔버스에있는 비디오의 크기가 계속 조절됩니다.

나는 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>

출처

2013-07-20 subtle cinema

크기 조정 이벤트는 어떤 이유로, 여러 번 발생합니다. 함수를 명시 적으로 호출하고 창 크기 조정 수신 대기를 중지하더라도 지터가 여전히 발생합니다. 이것은 캔버스의 동작 일뿐입니다. 비디오를 표시하면 문제없이 하루 종일 크기를 조정할 수 있습니다. –

당신은 문맥 변경, 당신은 setTimeout 기능 당신이 여기를 사용하는 방법을 사용하는 이전 값에 고정 것 같다. 따라서 크기를 조정할 때 루프는 이전 크기를 사용하고 더 이상 새로운 크기와 일치하지 않으므로이 크기 사이에서 비디오가 전환됩니다.

인수를 사용할 때 루프 호출이 깨끗해 지도록 값을 "전역 화"하십시오. 이 방법을 사용하면 변수에 각 라운드의 올바른 값이 포함되어 있는지 확인할 수 있습니다.

또한 을 requestAnimationFrame으로 변경하면 모니터의 v 블랭크 간격과 동기화되므로 루프를 더 낮은 수준 (효율적) 및 유동적으로 만들 수 있습니다. 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-21 03:25:41 K3N

감사합니다. 나는 정말로 jsfiddle도 인정했다! (다음 번에는 그다지 고칠 필요가 없습니다.) –

캔버스에있는 비디오의 크기가 계속 조절됩니다.

답변

관련 문제