Capture video thumbnail from html5 video


usage.js
import captureThumbnail from './capture.js';

captureThumbnail("http://test.com/myvideo.mp4").then(thumbnailUrl => console.log(thumbnailUrl));
capture.js
export default url => {
  return new Promise(resolve => {
    var canvas = document.createElement('canvas');
    var video = document.createElement('video');
    video.src = url;
    video.setAttribute('crossOrigin', 'anonymous');
    
    video.oncanplay = () => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
      resolve(canvas.toDataURL());
    }

    document.body.appendChild(video);
    document.body.appendChild(canvas);

    video.style.display = 'none';
    canvas.style.display = 'none';
  });
}

Share This Post