JavaScript/Canvas 썸네일형 리스트형 canvas에 poster이미지 로드 video 태그를 createElement('video') 생성하고, dom에 그리지 않고 바로 canvas에 drawImage(video, 0, 0, videoWidth, videoHeight); 할 경우 video를 play하지 않으면 초기에 썸네일이 나오지 않는 이슈가 있다. video src에 t=0.1;을 추가해주면 된다. const POSTER_TIME = 0.1; export const videoUrl = `${HOST_API}/video/bear.mp4#t=${POSTER_TIME}`; 모든 브라우저, 디바이스에서 작동되는지는 확인해봐야 한다. 출처: https://stackoverflow.com/questions/7323053/dynamically-using-the-first-frame-.. requestAnimationFrame 을 지정된 시간동안 일정하게 호출하는 방법 1. setTimeout으로 1초에 30 프레임씩 render start = (callback, fps) => { const seconds = 1000 / fps; callback(); this.id = setTimeout(() => { this.start(callback, fps); }, seconds); } 2. requestAnimationFrame으로 1초에 30 프레임씩 render start = (callback, fps) => { const frame = timestamp => { if (this.timestamp === 0) { this.timestamp = timestamp; } this.totalProgress = timestamp - this.timestamp; this.progres.. 이전 1 다음
