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-as-poster-in-html5-video

Dynamically using the first frame as poster in HTML5 video?