JavaScript + HTML5로 캔버스상에서 공처럼 튀는 비디오 테스트.

비디오로는 webm 파일만을 올려놔서 크롬, 쿨노보에서는 제대로 실행되지만 파이어폭스 등에선 실행되지 않는다.

CSS에서 z-index를 이용해 비디오위에 캔버스가 놓이게 지정하고 비디오를 덮는 하얀색 마스크를 사용한 것.

비디오의 경우 setInterval(drawScene, 50); 으로 타이머를 지정해 초당 20회씩 화면을 새로 그리게 하고
ctx.drawImage(v, ballX, ballY, videow, videoh);
코드로 비디오의 이미지를 한 장 한 장 그리는 방식을 썼다.

14/2/9 일